diff --git a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
index b20c6b48..5275d9ed 100644
--- a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
+++ b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
@@ -172,7 +172,7 @@ function fn_listPops(typeDivCd) {
-
+
@@ -264,7 +264,13 @@ function fn_listPops(typeDivCd) {
-
+
@@ -309,7 +315,13 @@ function fn_listPops(typeDivCd) {
-
+
@@ -357,7 +369,13 @@ function fn_listPops(typeDivCd) {
-
+
@@ -439,16 +457,6 @@ function fn_listPops(typeDivCd) {
type: 'fraction',
}
});
-
- $('.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;
@@ -473,8 +481,8 @@ function fn_listPops(typeDivCd) {
}
/* 문화원s pick */
- var swiper = new Swiper('.pickSwiper', {
- loop : false,
+ var pickswiper = new Swiper('.pickSwiper', {
+ 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",
- clickable: true,
- },
- */
+ el: '.pagination .swiper-pagination',
+ 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: {
- // delay: 4000,
- // disableOnInteraction: false,
- // },
+ autoplay: {
+ delay: 4000,
+ 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', {
- loop: false,
+ var popularswiper = new Swiper('.popularSwiper', {
+ loop: true,
slidesPerView : _slidesPerViewpopula,
spaceBetween : _spaceBetween,
autoplay : {
@@ -540,9 +552,10 @@ function fn_listPops(typeDivCd) {
disableOnInteraction : false,
},
centeredSlides : false,
- pagination : {
- el : ".swiper-pagination",
- },
+ pagination: {
+ el: '.pagination .swiper-pagination',
+ type: 'fraction',
+ },
on: {
init: function () {
if (this.slides.length <= _lenght) {
@@ -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();
+ }
+ });
+
diff --git a/src/main/webapp/css/default.css b/src/main/webapp/css/default.css
index 9f012e32..ea58466b 100644
--- a/src/main/webapp/css/default.css
+++ b/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;}
diff --git a/src/main/webapp/images/btn/btn-mainvisual-play-black.png b/src/main/webapp/images/btn/btn-mainvisual-play-black.png
new file mode 100644
index 00000000..26e0127c
Binary files /dev/null and b/src/main/webapp/images/btn/btn-mainvisual-play-black.png differ
diff --git a/src/main/webapp/images/btn/btn-mainvisual-stop-black.png b/src/main/webapp/images/btn/btn-mainvisual-stop-black.png
new file mode 100644
index 00000000..9aebe8c4
Binary files /dev/null and b/src/main/webapp/images/btn/btn-mainvisual-stop-black.png differ
