2024/01/16 header 수정, mainPage 슬라이드 수정

src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp

@@ -420,16 +420,16 @@ function instrChk(){
 									<c:set var="popzATitle">새창열림</c:set>
 								</c:if>
 								<c:if test="${popipZoneList.istarget == 'N'}">
-									<a href="javascript:popzoneOpen('${popipZoneList.mlink}','${popipZoneList.istarget}');" title="새창열림" >
+									<a class="swiper-slide" href="javascript:popzoneOpen('${popipZoneList.mlink}','${popipZoneList.istarget}');" title="새창열림" >
-										<div class="swiper-slide">
+										<div>
 											<img style="cursor:pointer"	onerror="this.src='/images/no_img.jpg'" alt="${popipZoneList.imgAlt} 팝업" 
 											src='<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${popipZoneList.popupzoneImageFile}"/>' />
 										</div>
 									</a>
 								</c:if>
 								<c:if test="${popipZoneList.istarget != 'N'}">
-									<a href="javascript:popzoneOpen('${popipZoneList.mlink}','${popipZoneList.istarget}');">
+									<a class="swiper-slide" href="javascript:popzoneOpen('${popipZoneList.mlink}','${popipZoneList.istarget}');">
-										<div class="swiper-slide">
+										<div>
 											<img style="cursor:pointer"	onerror="this.src='/images/no_img.jpg'" alt="${popipZoneList.imgAlt} 팝업" 
 											src='<c:url value='/uss/ion/pwm/getImage.do'/>?atchFileId=<c:out value="${popipZoneList.popupzoneImageFile}"/>' />
 										</div>

src/main/webapp/visitEdu/usr/publish/css/main.css

@@ -28,6 +28,8 @@
 .visual_slide .swiper-slide[data-swiper-slide-index="3"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_04.jpg) no-repeat center top;}
 .visual_slide .swiper-slide[data-swiper-slide-index="4"]{background:url(/offedu/visitEdu/usr/publish/images/main/main_visual_05.jpg) no-repeat center top;}
 
+.visual_slide .swiper-pagination-bullet:focus-visible{outline:2px solid #000;}
+
 /* main_banner_link */
 .container .main_banner_link{position:relative;height:130px;margin:20px auto 70px auto;}
 .container .main_banner_link li{position:relative;display:flex;width:calc((100%/5) - 12px);height:100%;background-color:#fff;border-radius:5px;box-shadow:0 0 5px rgba(45,55,90,0.2);align-items:center;transition:all 0.3s ease-in-out;}
@@ -89,6 +91,7 @@
 .wrap .notify .notify_control .slide_pause{background:url(/offedu/visitEdu/usr/publish/images/main/btn_pause.png) no-repeat center center;}
 .wrap .notify .notify_control .slide_play{background:url(/offedu/visitEdu/usr/publish/images/main/btn_play.png) no-repeat center center;}
 .wrap .notify .content{width:100%;height:332px;overflow:hidden;border-radius:5px;}
+.wrap .notify .notify_slide a:focus{width:calc(100% - 6px);height:calc(100% - 6px);margin:2px 0 0 2px;}
 
 @media all and (max-width: 1440px){
   .main .inner{width:calc(100% - 40px);}

src/main/webapp/visitEdu/usr/publish/script/common.js

@@ -173,8 +173,6 @@ function header() {
 		depth01_li.addClass("on");
 		$('header .depth02').css('height',h + 'px');
 	}
-	
-	
 
 	gnb.find(".menu_link").on("mouseover", function () {
 		open_gnb($(this));
@@ -217,10 +215,9 @@ function header() {
 		$(".depth01_li").removeClass("on");
 		$("header .depth02").animate({height:'auto'},1000);
 	});
-	$(".depth01_li").on('mouseleave',function(){
+	/*$(".depth01_li").on('mouseleave',function(){
 		$('header .depth02').attr('style','');
-	})
+	});*/
-
 	$("#menu .depth01_li:last-child .depth02 li:last-child").on("focusout", function () {
 		header.removeClass("on").attr('style','');
 		$("#menu .depth01_li").removeClass("on");

src/main/webapp/visitEdu/usr/publish/script/main.js

@@ -1,5 +1,8 @@
 $(document).ready(function () {
 
+	$(".visual_slide .swiper-slide-active").siblings(".swiper-slide").find("a").attr("tabindex","-1");
+	$(".notify_slide .swiper-slide-active").siblings(".swiper-slide").attr("tabindex","-1");
+	
   //visual slide
   var visualSlide = new Swiper('.visual_slide', {
     spaceBetween: 30,
@@ -14,8 +17,20 @@ $(document).ready(function () {
     navigation: {
 	    nextEl: '.visual_slide .btn_next_slide',
 	    prevEl: '.visual_slide .btn_prev_slide',
+    },
+    on:{
+    	slideChange:function(){
+    		$(".visual_slide").find(".swiper-slide-active").find("a").attr("tabindex","0");
+    		$(".visual_slide").find(".swiper-slide-active").siblings(".swiper-slide").find("a").attr("tabindex","-1");
+    	},
+    	transitionStart:function(){
+			$(".visual_slide").find(".swiper-slide-active").find("a").attr("tabindex","0");
+			$(".visual_slide").find(".swiper-slide-active").siblings(".swiper-slide").find("a").attr("tabindex","-1");
+		}
     }
   });
+  
+  
 
   // notify slide
   var notifySlide = new Swiper('.notify_slide', {
@@ -31,8 +46,35 @@ $(document).ready(function () {
     navigation: {
       nextEl: ".notify_control .swiper-button-next",
       prevEl: ".notify_control .swiper-button-prev",
+    },
+    on:{
+    	slideChange:function(){
+    		$(".notify_slide").find(".swiper-slide-active").attr("tabindex","0");
+    		$(".notify_slide").find(".swiper-slide-active").siblings(".swiper-slide").attr("tabindex","-1");
+    	},
+    	transitionStart:function(){
+			$(".notify_slide").find(".swiper-slide-active").attr("tabindex","0");
+			$(".notify_slide").find(".swiper-slide-active").siblings(".swiper-slide").attr("tabindex","-1");
+		}
     }
   });
+  
+  // 슬라이드 포커싱 시 멈춤/재생
+  $('.visual_slide .swiper-slide a').focusin(function(){
+	  visualSlide.autoplay.stop();
+  });
+  
+  $('.visual_slide .swiper-slide a').focusout(function(){
+	  visualSlide.autoplay.start();
+  })
+  
+  $('.notify_slide .swiper-slide').focusin(function(){
+	  notifySlide.autoplay.stop();
+  });
+  
+  $('.notify_slide .swiper-slide').focusout(function(){
+	  notifySlide.autoplay.start();
+  })
 
 
   $(".visual_slide .slide_pause").click(function () { // 중지버튼 눌렀을때