슬라이드 수정

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

@@ -440,8 +440,9 @@ function fn_listPops(typeDivCd) {
 		_spaceBetween = 20;
 	}
 
+	
 	/* 문화원s pick */
-	var swiper = new Swiper(".pickSwiper", {
+	var swiper = new Swiper('.pickSwiper', {
 		loop : true,
 		slidesPerView : _slidesPerView,
 		spaceBetween : _spaceBetween,
@@ -454,27 +455,26 @@ function fn_listPops(typeDivCd) {
 			nextEl : ".swiper-button-next",
 			prevEl : ".swiper-button-prev",
 		},
-	/*
+		/*
-	pagination: {
+		pagination: {
-	    el: ".swiper-pagination",
+		    el: ".swiper-pagination",
-	    clickable: true,
+		    clickable: true,
-	},
-	 */
-	});
-
-	/* 인기자료 */
-	var swiper = new Swiper(".popularSwiper", {
-		loop: true,
-		slidesPerView : _slidesPerViewpopula,
-		spaceBetween : _spaceBetween,
-		centeredSlides : false,
-		pagination : {
-			el : ".swiper-pagination",
 		},
+		 */
+	    on: {
+	        init: function () {
+	            if (this.slides.length <= 5) {
+	                // First way:
+	                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";
+	            }
+	        }
+	    }
 	});
 	
 	/* 온라인 자료관 */
-	var swiper = new Swiper(".onlineSwiper", {
+	var swiper = new Swiper('.onlineSwiper', {
 		loop : true,
 		slidesPerView : _slidesPerViewOnline,
 		spaceBetween : _spaceBetween,
@@ -487,12 +487,41 @@ function fn_listPops(typeDivCd) {
 			nextEl : ".swiper-button-next",
 			prevEl : ".swiper-button-prev",
 		},
-	/*
+	    on: {
-	pagination: {
+	        init: function () {
-	    el: ".swiper-pagination",
+	            if (this.slides.length <= 5) {
-	    clickable: true,
+	                // First way:
-	},
+	                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";
+	            }
+	        }
+	    }
+	});
+	
+	/* 인기자료 */
+	var swiper = new Swiper('.popularSwiper', {
+		loop: true,
+		slidesPerView : _slidesPerViewpopula,
+		spaceBetween : _spaceBetween,
+		autoplay : {
+			delay : 2500,
+			disableOnInteraction : false,
+		},
+		centeredSlides : false,
+		pagination : {
+			el : ".swiper-pagination",
+		},
+	    on: {
+	        init: function () {
+	            if (this.slides.length <= 5) {
+	                // First way:
+	                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";
+	            }
+	        }
+	    }
 	});
 </script>
 

src/main/webapp/WEB-INF/jsp/nlib/collection/searchItemDetail.jsp

@@ -398,9 +398,10 @@ function goList(){
      if (windowWidth < 480) {
          _slidesPerView = 1;
      }
+     
      /* 함께 볼만한자료 슬라이드 */
-     var swiper = new Swiper(".DetailSwiper1", {
+  	var swiper = new Swiper('.DetailSwiper1', {
-         loop: true,
+  		loop: false,
          slidesPerView: _slidesPerView,
          spaceBetween: 30,
          centeredSlides: false,
@@ -418,7 +419,17 @@ function goList(){
              clickable: true,
          },
          */
-     });
+  	    on: {
+  	        init: function () {
+  	            if (this.slides.length <= 5) {
+  	                // First way:
+  	                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";
+  	            }
+  	        }
+  	    }
+  	});
 
      var _slidesPerViewBottom = 5;
      var _spaceBetween = 30;
@@ -426,25 +437,37 @@ function goList(){
          _slidesPerViewBottom = 1.5;
          _spaceBetween = 20;
      }
+     
      /* 유사한 자료 슬라이드 */
-     var swiper = new Swiper(".DetailSwiper2", {
+ 	var swiper = new Swiper('.DetailSwiper2', {
-         loop: true,
+ 		loop: true,
-         slidesPerView: _slidesPerViewBottom,
+        slidesPerView: _slidesPerViewBottom,
-         spaceBetween: _spaceBetween,
+        spaceBetween: _spaceBetween,
-         centeredSlides: true,
+        centeredSlides: true,
-         autoplay: {
+        autoplay: {
-             delay: 1112500,
+            delay: 2500,
-             disableOnInteraction: false,
+            disableOnInteraction: false,
-         },
+        },
-         navigation: {
+        navigation: {
-             nextEl: ".swiper-button-next",
+            nextEl: ".swiper-button-next",
-             prevEl: ".swiper-button-prev",
+            prevEl: ".swiper-button-prev",
-         },
+        },
-         /*
+        /*
-         pagination: {
+        pagination: {
-             el: ".swiper-pagination",
+            el: ".swiper-pagination",
-             clickable: true,
+            clickable: true,
-         },
+        },
-         */
+        */
-     });
+ 	    on: {
+ 	        init: function () {
+ 	            if (this.slides.length <= 5) {
+ 	                // First way:
+ 	                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";
+ 	            }
+ 	        }
+ 	    }
+ 	});
+     
    </script>

src/main/webapp/css/default.css

@@ -509,7 +509,7 @@ transform: rotate(45deg);
 .join .inner .row-bottom .join-box .form-group.Usermobile .con .row .timer {display: inline-block;width:15px;height:15px;position: absolute;top:8px;right:350px;z-index: 99;color:red;display:none;}
 .join .inner .row-bottom .join-box .form-group .con span.fail {width:26%;font-size:12px;display: inline-block;margin:0px 0px 0px 10px;vertical-align: middle;color:red;display: none;}
 
-.join .inner .row-bottom .join-box .form-group.Userbirth .con label {display:inline !important;position:absolute;z-index:-1;}
+.join .inner .row-bottom .join-box .form-group.Userbirth .con label {display:inline !important;position:absolute;z-index:-1;opacity:0;}
 .join .inner .row-bottom .join-box .form-group.Usermobile .con label[for="mobileNo_1"], 
 .join .inner .row-bottom .join-box .form-group.Usermobile .con label[for="mobileNo_2"], 
 .join .inner .row-bottom .join-box .form-group.Usermobile .con label[for="mobileNo_3"] {display:inline !important;position:absolute;z-index:-1;}
@@ -1707,7 +1707,7 @@ transform: rotate(45deg);
 .pop-login-connect .inner .First .Btn button span:nth-of-type(1) {border-right:1px solid #ddd;margin-right:10px;padding-right:10px;}
 .pop-login-connect .inner .First .Btn button:hover {border:1px solid #4a7ba6;}
 .pop-login-connect .inner .First .Btn button:hover span {color:#222;}
-.pop-login-connect .inner .btn {width:70%;padding:20px 15% 0px;}
+.pop-login-connect .inner .btn {width:68%;padding:20px 15% 0px;}
 .pop-login-connect .inner .btn p .cancel {color:#999;width:100%;display:inline;font-size:12px;font-weight: 300;border-bottom: 1px solid #ddd;padding:3px 3px;}
 .pop-login-connect .inner .login-close {position: absolute;right: 20px;top: 20px;width: 26px;height: 26px;text-indent: 9999px;font-size: 0;overflow: hidden;background: url(/images/btn/btn_close_size_27x26_c9c9c7.png) no-repeat;background-size: 100%;}
 .pop-login-connect .Bg {width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(0,0,0,0.5);z-index:-1;}
@@ -1755,13 +1755,13 @@ transform: rotate(45deg);
 
 
 /* 반려사유 팝업 */
-.pop-return {position:fixed;top:9%;left:calc(50% - 210px);width: 420px;height: 60%;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} 
+.pop-return {position:fixed;top:9%;left:calc(50% - 210px);width: 420px;height: 55%;border-radius: 5px;overflow: hidden;padding: 0 0px;background: #fff;z-index:999;} 
 .pop-return .inner {display:inline-block;width:100%;height: calc(100% - 270px);overflow:auto;padding:50px 0px;background: #fff;}
 .pop-return .inner .row {padding:0px 30px 0px;text-align:center;}
 .pop-return .Title {text-align:center;padding:30px 0px;background: url(/images/bg/bg-login.jpg) no-repeat;background-size:cover;}
 .pop-return .Title h3 {font-size:24px;line-height:30px;margin-top:15px;color:#fff;font-weight: 300;}
 .pop-return .Title p {font-size:16px;line-height:16px;color:#fff;}
-.pop-return .inner .Text .text-box {color:#666;background: #f8f8f8;border:1px solid #ddd;border-radius:3px;padding:20px;font-size:14px;height:80px;text-align: left;margin-bottom:40px;}
+.pop-return .inner .Text .text-box {overflow:auto;color:#666;background: #f8f8f8;border:1px solid #ddd;border-radius:3px;padding:20px;font-size:14px;height:80px;text-align: left;margin-bottom:40px;}
 .pop-return .inner .btn {width:70%;padding:20px 15% 40px;line-height: normal}
 .pop-return .inner .btn-box .btn {width:auto;padding:10px 25px;}
 .pop-return .inner .btn p .cancel {color:#999;width:100%;display:inline;font-size:12px;font-weight: 300;border-bottom: 1px solid #ddd;padding:3px 3px;}

src/main/webapp/css/media.css

@@ -195,7 +195,7 @@ footer .family_site {right:10px;}
 .pop-serge {width:700px;left:calc(50% - 350px);}
 .data.detail .inner .row-top {padding:45px 2%;width:96%;}
 .data.detail .inner .row-top .center .left {margin-right:6%;}
-.data.detail .inner .row-bottom .con-1 .list-box .list {width:24.5%;}
+.data.detail .inner .row-bottom .con-1 .list-box .list {width:24.5%;min-height:150px;}
 .list-table-wrap li .t-date {width:20%;}
 .list-table-wrap li .t-writer {width:25%;}
 .list-search .left {width:50%;}
@@ -802,7 +802,7 @@ footer .family_site {right:10px;}
  .view-con .view-txt p img {width:100% !important;height:auto !important;}
  /*.view-con .view-txt * {width:100% !important;height:auto !important;display:inline-block;}*/
  .noti-data .btn-box a { width: 100%; box-sizing: border-box; font-size: 14px; font-weight: normal; } 
- .list-table-wrap li .t-writer {width: 55px !important;height: 15px !important;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+ .list-table-wrap li .t-writer {width: auto !important;height: 15px !important;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align:left;}
  .community-write fieldset {border-top:0;}
 
  /* faq */
@@ -863,7 +863,7 @@ footer .family_site {right:10px;}
  .qna .list-table-wrap li .t-date,
  .qna .list-table-wrap li .t-answer { width: auto; } 
  .qna .list-table-wrap li .t-writer,
- .qna .list-table-wrap li .t-date { margin-right: 10px; padding-right: 10px; border-right: 1px solid #ccc; line-height: 1; } 
+ .qna .list-table-wrap li .t-date { margin-right: 10px; padding-right: 10px; border-right: 1px solid #ccc; line-height: 1;text-align:left;width:auto !important; } 
  .qna .btn-box,
  .qna .btn-box .btn { width: 100%; } 
 
@@ -1097,6 +1097,8 @@ footer .family_site {right:10px;}
  .pop-login .inner .Text { width: 100%; padding: 56px 0 0; } 
  .pop-login .inner .mo-pop-Title { display: block; } 
  
+ .pop-find .inner {height: calc(100% - -60px);}
+ 
  /* 상세검색 팝업 */
  .popup.pop-advanced-search .pop-wrap { width: 100vw; height: 100vh; border-radius: 0; } 
  .pop-advanced-search .pop-wrap .Title { padding: 0 16px; box-sizing: border-box; width: 100%; } 
@@ -1160,9 +1162,9 @@ footer .family_site {right:10px;}
  .pop-login-connect .Title p,
  .pop-login-connect .Title h3,
  .pop-login-password .Title p,
- .pop-login-password .Title h3 { display: none; } 
+ .pop-login-password .Title h3 { } 
  .pop-login-connect .inner,
- .pop-login-password .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; box-sizing: border-box; padding: 60px 16px; } 
+ .pop-login-password .inner { height: calc(100% - 75px);display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; box-sizing: border-box; padding: 60px 16px; } 
  .pop-login-connect .inner .row,
  .pop-login-password .inner .row { padding: 0; width: 100%; } 
  .pop-login-connect .inner h3.row,