From 64bc111e95fe4c9568b31ff6f9bd179e3600929f Mon Sep 17 00:00:00 2001 From: com02 Date: Tue, 14 Dec 2021 10:22:37 +0900 Subject: [PATCH] =?UTF-8?q?swiper=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../META-INF/maven/nlib/nlib/pom.properties | 2 +- .../webapp/META-INF/maven/nlib/nlib/pom.xml | 2 +- src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp | 47 +++++++++++++++++-- .../jsp/nlib/collection/searchItemDetail.jsp | 36 +++++++++++++- src/main/webapp/css/default.css | 4 +- 5 files changed, 82 insertions(+), 9 deletions(-) diff --git a/src/main/webapp/META-INF/maven/nlib/nlib/pom.properties b/src/main/webapp/META-INF/maven/nlib/nlib/pom.properties index ae5ad376..1f9ac057 100644 --- a/src/main/webapp/META-INF/maven/nlib/nlib/pom.properties +++ b/src/main/webapp/META-INF/maven/nlib/nlib/pom.properties @@ -1,5 +1,5 @@ #Generated by Maven Integration for Eclipse -#Thu Dec 09 09:34:33 KST 2021 +#Tue Dec 14 09:54:36 KST 2021 version=1.0.0 groupId=nlib m2e.projectName=iams.nlib diff --git a/src/main/webapp/META-INF/maven/nlib/nlib/pom.xml b/src/main/webapp/META-INF/maven/nlib/nlib/pom.xml index dad0f605..be6c718b 100644 --- a/src/main/webapp/META-INF/maven/nlib/nlib/pom.xml +++ b/src/main/webapp/META-INF/maven/nlib/nlib/pom.xml @@ -21,7 +21,7 @@ 3.8.0 4.2.5.RELEASE 1.7.2 - 2.11.0 + 2.15.0 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 d7582a46..855e9367 100644 --- a/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp +++ b/src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp @@ -463,7 +463,6 @@ $(function(){ var _centeredSlides = false; var _loop = false; - if (windowWidth <= 768) { _loop = false; _slidesPerView = 1; @@ -495,8 +494,8 @@ $(function(){ /* 문화원s pick */ var pickswiper = new Swiper('.pickSwiper', { loop : _loop, - slidesPerView : _slidesPerView, - spaceBetween : _spaceBetween, + slidesPerView : 5, + spaceBetween : 30, centeredSlides : _centeredSlides, autoplay : false, navigation : { @@ -507,6 +506,20 @@ $(function(){ el: '.pagination .swiper-pagination', type: 'fraction', }, + breakpoints: { + 768: { + slidesPerView : 1, + spaceBetween : 20, + }, + 1400: { + slidesPerView : 3, + spaceBetween : 30, + }, + 4989: { + slidesPerView : 5, + spaceBetween : 30, + } + }, on: { init: function () { if (this.slides.length <= _lenght) { @@ -535,6 +548,20 @@ $(function(){ el: '.pagination .swiper-pagination', type: 'fraction', }, + breakpoints: { + 768: { + slidesPerView : 1, + spaceBetween : 20, + }, + 1400: { + slidesPerView : 3, + spaceBetween : 30, + }, + 4989: { + slidesPerView : 7, + spaceBetween : 30, + } + }, on: { init: function () { if (this.slides.length <= _lenght) { @@ -559,6 +586,20 @@ $(function(){ el: '.pagination .swiper-pagination', type: 'fraction', }, + breakpoints: { + 768: { + slidesPerView : 1, + spaceBetween : 20, + }, + 1400: { + slidesPerView : 2, + spaceBetween : 30, + }, + 4989: { + slidesPerView : 4, + spaceBetween : 30, + } + }, on: { init: function () { if (this.slides.length <= _lenght) { diff --git a/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp b/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp index 01b662b6..bca7e596 100644 --- a/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp +++ b/src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp @@ -535,7 +535,7 @@ $(function(){ var _spaceBetween = 30; var _centeredSlides = false; var _lenght = 5; - + if (windowWidth <= 768) { _loop = false; _slidesPerView = 1; @@ -560,7 +560,7 @@ $(function(){ _centeredSlides = false; _lenght = 5; } - + /* 함께 볼만한자료 슬라이드 */ var detailswiper1 = new Swiper('.DetailSwiper1', { loop: _loop, @@ -576,6 +576,23 @@ $(function(){ el: '.pagination .swiper-pagination', type: 'fraction', }, + breakpoints: { + 768: { + loop : _loop, + slidesPerView : 1, + spaceBetween : 20, + }, + 1400: { + loop : _loop, + slidesPerView : 3, + spaceBetween : 30, + }, + 4989: { + loop : _loop, + slidesPerView : 4, + spaceBetween : 30, + } + }, on: { init: function () { if (this.slides.length <= _lenght) { @@ -604,6 +621,21 @@ $(function(){ el: '.pagination .swiper-pagination', type: 'fraction', }, + breakpoints: { + 768: { + slidesPerView : 1, + spaceBetween : 20, + }, + 1400: { + slidesPerView : 3, + spaceBetween : 30, + }, + 4989: { + loop : _loop, + slidesPerView : 5, + spaceBetween : 30, + } + }, on: { init: function () { if (this.slides.length <= _lenght) { diff --git a/src/main/webapp/css/default.css b/src/main/webapp/css/default.css index 0db89f3a..8adf3f2f 100644 --- a/src/main/webapp/css/default.css +++ b/src/main/webapp/css/default.css @@ -329,8 +329,8 @@ transition: all 0.2s ease-in-out; .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS {float:left;width:35%;} .sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .view a {background: #376795;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;} .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 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;top:45%;} +.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;top:45%;} .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%;}