접근성수정

src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp

@@ -172,7 +172,7 @@ function fn_listPops(typeDivCd) {
 						<div class="swiper-pagination"></div>
 						<div class="loop-count">
 							<canvas id="swieper-timer" width="32" height="32"></canvas>
-							<button class="remote"><span></span></button>
+							<button class="remote remote-main"><span></span></button>
 						</div>
 					</div>
 					
@@ -264,7 +264,13 @@ function fn_listPops(typeDivCd) {
                     </div>
                     <div class="swiper-button-next"></div>
                     <div class="swiper-button-prev"></div>
+                    <div id="pickBannerPage" class="pagination">
 						<div class="swiper-pagination"></div>
+						<div class="loop-count">
+							<canvas id="swieper-timer" width="32" height="32"></canvas>
+							<button class="remote remote-pick"><span></span></button>
+						</div>
+					</div>
                 </div>
             </div>
         </div>
@@ -309,7 +315,13 @@ function fn_listPops(typeDivCd) {
 	                            </li>
 	                            </c:forEach>
 	                        </ul> 
+	                        <div id="popularBannerPage" class="pagination">
 								<div class="swiper-pagination"></div>
+								<div class="loop-count">
+									<canvas id="swieper-timer" width="32" height="32"></canvas>
+									<button class="remote remote-popular"><span></span></button>
+								</div>
+							</div>
 	                    </div>
                     </div>
                 </div>
@@ -357,7 +369,13 @@ function fn_listPops(typeDivCd) {
                 </div>
                 <div class="swiper-button-next"></div>
                 <div class="swiper-button-prev"></div>
+                <div id="onlineBannerPage" class="pagination">
 					<div class="swiper-pagination"></div>
+					<div class="loop-count">
+						<canvas id="swieper-timer" width="32" height="32"></canvas>
+						<button class="remote remote-online"><span></span></button>
+					</div>
+				</div>
             </div>
             <div class="more-btn"><a href="javascript:void(0)" onclick="location.href='/search/searchList.do?collection=lib_online';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt="더보기"></span></a></div>
         </div>
@@ -440,16 +458,6 @@ function fn_listPops(typeDivCd) {
       }
    });
 
-   $('.remote').click(function () {
-      if($(this).hasClass('restart')){
-         $(this).removeClass('restart');
-         myswiper.autoplay.start();
-      }else{
-         $(this).addClass('restart');
-         myswiper.autoplay.stop();
-      }
-   });
-
    var windowWidth = $(window).width();
    var _slidesPerView = 5;
    var _slidesPerViewpopula = 4;
@@ -473,8 +481,8 @@ function fn_listPops(typeDivCd) {
    }
    
    /* 문화원s pick */
-   var swiper = new Swiper('.pickSwiper', {
+   var pickswiper = new Swiper('.pickSwiper', {
-      loop : false,
+      loop : true,
       slidesPerView : _slidesPerView,
       spaceBetween : _spaceBetween,
       centeredSlides : false,
@@ -486,12 +494,10 @@ function fn_listPops(typeDivCd) {
          nextEl : ".swiper-button-next",
          prevEl : ".swiper-button-prev",
       },
-      /*
       pagination: {
-          el: ".swiper-pagination",
+          el: '.pagination .swiper-pagination',
-          clickable: true,
+          type: 'fraction',
        },
-       */
        on: {
            init: function () {
                if (this.slides.length <= _lenght) {
@@ -499,25 +505,30 @@ function fn_listPops(typeDivCd) {
                    this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                    this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                    this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
+                   this.el.querySelector(".loop-count").style.visibility = "hidden";
                }
            }
        }
    });
    
    /* 온라인 자료관 */
-   var swiper = new Swiper('.onlineSwiper', {
+   var onlineswiper = new Swiper('.onlineSwiper', {
       loop : true,
       slidesPerView : _slidesPerViewOnline,
       spaceBetween : _spaceBetween,
       centeredSlides : true,
-      // autoplay: {
+      autoplay: {
-      //     delay: 4000,
+          delay: 4000,
-      //     disableOnInteraction: false,
+          disableOnInteraction: false,
-      // },
+      },
       navigation : {
          nextEl : ".swiper-button-next",
          prevEl : ".swiper-button-prev",
       },
+      pagination: {
+          el: '.pagination .swiper-pagination',
+          type: 'fraction',
+       },
        on: {
            init: function () {
                if (this.slides.length <= _lenght) {
@@ -525,14 +536,15 @@ function fn_listPops(typeDivCd) {
                    this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                    this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                    this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
+                   this.el.querySelector(".loop-count").style.visibility = "hidden";
                }
            }
        }
    });
    
    /* 인기자료 */
-   var swiper = new Swiper('.popularSwiper', {
+   var popularswiper = new Swiper('.popularSwiper', {
-      loop: false,
+      loop: true,
       slidesPerView : _slidesPerViewpopula,
       spaceBetween : _spaceBetween,
       autoplay : {
@@ -541,7 +553,8 @@ function fn_listPops(typeDivCd) {
       },
       centeredSlides : false,
       pagination: {
-         el : ".swiper-pagination",
+          el: '.pagination .swiper-pagination',
+          type: 'fraction',
        },
        on: {
            init: function () {
@@ -551,9 +564,47 @@ function fn_listPops(typeDivCd) {
                    //this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                    //this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
                    $(".swiper-pagination").css('visibility','hidden');
+                   this.el.querySelector(".loop-count").style.visibility = "hidden";
                }
            }
        }
    });
    
+	$('.remote-main').click(function () {
+	  if($(this).hasClass('restart')){
+	     $(this).removeClass('restart');
+	     myswiper.autoplay.start();
+	  }else{
+	     $(this).addClass('restart');
+	     myswiper.autoplay.stop();
+	  }
+   });
+   $('.remote-pick').click(function () {
+	  if($(this).hasClass('restart')){
+	     $(this).removeClass('restart');
+	     pickswiper.autoplay.start();
+	  }else{
+	     $(this).addClass('restart');
+	     pickswiper.autoplay.stop();
+	  }
+	});
+   $('.remote-popular').click(function () {
+	  if($(this).hasClass('restart')){
+	     $(this).removeClass('restart');
+	     popularswiper.autoplay.start();
+	  }else{
+	     $(this).addClass('restart');
+	     popularswiper.autoplay.stop();
+	  }
+	});
+   $('.remote-online').click(function () {
+	  if($(this).hasClass('restart')){
+	     $(this).removeClass('restart');
+	     onlineswiper.autoplay.start();
+	  }else{
+	     $(this).addClass('restart');
+	     onlineswiper.autoplay.stop();
+	  }
+	});
+  
 </script>

src/main/webapp/css/default.css

@@ -210,7 +210,7 @@ transform: rotate(45deg);
 /********** 메인섹션3 **********/
 .sec3 {background:#f5f5f5;padding:100px 0px 100px;}
 .sec3 .inner {width:100%;position: relative;}
-.sec3 .pickSwiper {width:80%;padding:1% 10%;}
+.sec3 .pickSwiper {width:80%;padding:1% 10% 4%;}
 .sec3 .pickSwiper::before {content: '';width:9%;height:600px;background: #f5f5f5;display: inline-block;position: absolute;left:0px;top:0px;z-index: 9;}
 .sec3 .pickSwiper::after {content: '';width:9%;height:600px;background: #f5f5f5;display: inline-block;position: absolute;right:0px;top:0px;z-index: 9;}
 .sec3 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;}
@@ -227,7 +227,13 @@ transform: rotate(45deg);
 .sec3 .pickSwiper .swiper-slide:hover .list-box .subject .cla {background:#376795;color:#fff;}
 .underline.pink {background-image: linear-gradient(transparent 60%, #fbe8d3 40%);}
 .sec3 .pickSwiper .swiper-slide:hover .underline {background-size: 100% 100%;}
-
+.sec3 .pickSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+.sec3 .pickSwiper .loop-count button.remote-pick {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
+.sec3 .pickSwiper .loop-count button.remote-pick span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
+.sec3 .pickSwiper .loop-count button.remote-pick:focus {outline:none;}
+.sec3 .pickSwiper .loop-count button.remote-pick.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
+.sec3 .pickSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
+.sec3 .pickSwiper .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
 
 /********** 메인섹션4 **********/
 .sec4 .inner .middle-banner {background: url(/images/bg/bg-sec4-bg.jpg) no-repeat;width:100%;height:317px;background-size: cover;}
@@ -250,7 +256,7 @@ transform: rotate(45deg);
 transition: all 0.2s ease-in-out;
 }
 .sec5 .inner .tabs li.current a {background: #0a2c56;color:#fff;}
-.sec5 .inner .tab_content {display:inline-block;width:1320px;background: #fff;border:1px solid #ddd;padding:30px 40px;margin-top:30px;}
+.sec5 .inner .tab_content {display:inline-block;width:1320px;background: #fff;border:1px solid #ddd;padding:0px 40px;margin-top:30px;}
 .sec5 .inner .tab_content .mCSB_inside > .mCSB_container {margin-right:0px !important;}
 .sec5 .inner .tab_content .mCSB_scrollTools .mCSB_draggerContainer {left:-25px !important;}
 .sec5 .inner .tab_content .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: rgba(0,0,0,0.55);}
@@ -267,7 +273,14 @@ transition: all 0.2s ease-in-out;
 .sec5 .inner .tabs_item ul li .con-2 {}
 .sec5 .inner .tabs_item ul li .con-2 p {font-size:14px;color:#777;margin-bottom: 5px;}
 .sec5 .inner .tabs_item ul li .con-2 p span:nth-of-type(1) {display:inline-block;font-weight:500;padding-right:10px;margin-right:10px;border-right:1px solid #ddd;height:10px;line-height:9px;}
-
+.sec5 .popularSwiper {padding:1% 0% 4%;}
+.sec5 .popularSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+.sec5 .popularSwiper .loop-count button.remote-popular {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
+.sec5 .popularSwiper .loop-count button.remote-popular span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
+.sec5 .popularSwiper .loop-count button.remote-popular:focus {outline:none;}
+.sec5 .popularSwiper .loop-count button.remote-popular.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
+.sec5 .popularSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
+.sec5 .popularSwiper .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
 
 /********** 메인섹션6 **********/
 .sec6 {padding:100px 0px 100px;}
@@ -275,7 +288,7 @@ transition: all 0.2s ease-in-out;
 .sec6 .inner .more-btn {position:absolute;right: calc(50% - 690px);top:30px;}
 .sec6 .inner .more-btn a {}
 .sec6 .inner .more-btn a span > span {margin-right:5px;}
-.sec6 .onlineSwiper {padding:5px 0px;}
+.sec6 .onlineSwiper {padding:1% 0px 4%;}
 .sec6 .onlineSwiper::before {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;left:0px;top:-10%;z-index: 9;box-shadow:30px 0px 30px rgba(255,255,255,1.0);}
 .sec6 .onlineSwiper::after {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;right:0px;top:-10%;z-index: 9;box-shadow:-30px 0px 30px rgba(255,255,255,1.0);}
 .sec6 .onlineSwiper .swiper-slide {height:auto;border-radius:10px;/*background: #ccc;box-shadow:1px 1px 5px rgba(0,0,0,0.3);*/}
@@ -314,7 +327,13 @@ transition: all 0.2s ease-in-out;
 .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS a {background: #666;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;}
 .sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;}
 .sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;}
-
+.sec6 .onlineSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
+.sec6 .onlineSwiper .loop-count button.remote-online {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
+.sec6 .onlineSwiper .loop-count button.remote-online span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
+.sec6 .onlineSwiper .loop-count button.remote-online:focus {outline:none;}
+.sec6 .onlineSwiper .loop-count button.remote-online.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
+.sec6 .onlineSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
+.sec6 .onlineSwiper .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
 
 /********** 메인섹션7 **********/
 .sec7 {background:#f5f5f5;padding:100px 0px 100px;display: inline-block;width:100%;height:auto;}