이태영 - 20210513 장바구니 수정사항 수정(팝업 스크롤바 추가 - 상품 5개 초과일때)

src/main/webapp/WEB-INF/views/web/cart/CartDelvFeeSaveGoodsPopupWeb.html

@@ -8,7 +8,7 @@
 			<div class="modal-body">
 				<div class="pop_cont">
 					<div class="area_slider">
-						<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
+						<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-delv-container">
 							<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
 								<div th:each="goods, status : ${goodsList}" class="swiper-slide swiper-slide-active" style="width: 150px; margin-right: 20px;">
 									<div class="item_prod">
@@ -33,7 +33,7 @@
 								</div>
 							</div>
 							<!-- Add Scrollbar -->
-							<!--<div class="swiper-scrollbar"></div>-->
+							<div class="swiper-scrollbar" th:if="${goodsList.size() > 5}" style="opacity: 0; transition-duration: 400ms;"><div class="swiper-scrollbar-drag" style="width: 514.104px; transform: translate3d(0px, 0px, 0px);"></div></div>
 							<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
 						</div>
 					</div>
@@ -43,13 +43,13 @@
 
 			<script>
 				//팝업 - 배송비 SAVE 상품보기 > 슬라이드
-				var dlvrSaveSwiper = new Swiper('.dlvrSave_pop .swiper-container', {
+				var dlvrSaveSwiper = new Swiper('#dlvrSavePop .swiper-delv-container', {
 					observer:true,
 					observeParents: true,
 					slidesPerView: 5,
 					spaceBetween: 20,
 					scrollbar: {
-						el: '.dlvr_save_pop .swiper-scrollbar',
+						el: '#dlvrSavePop .swiper-scrollbar',
 						hide: true,
 					},
 				});

src/main/webapp/WEB-INF/views/web/cart/CartTmtbSalesGoodsPopupWeb.html

@@ -15,9 +15,8 @@
 				</div>
 				<!-- -->
 				<div class="area_slider">
-					<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
+					<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-tmtb-container">
 						<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
-
 							<div th:each="goods, status : ${goodsList}" class="swiper-slide swiper-slide-active" style="width: 150px; margin-right: 20px;">
 								<div class="item_prod">
 									<div class="item_state">
@@ -41,8 +40,9 @@
 							</div>
 						</div>
 						<!-- Add Scrollbar -->
-						<!--<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;"><div class="swiper-scrollbar-drag" style="width: 514.104px; transform: translate3d(0px, 0px, 0px);"></div></div>-->
-						<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
+						<div class="swiper-scrollbar" th:if="${goodsList.size() > 5}" style="opacity: 0; transition-duration: 400ms;"><div class="swiper-scrollbar-drag" style="width: 514.104px; transform: translate3d(0px, 0px, 0px);"></div></div>
+						<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
+					</div>
 				</div>
 				<!-- -->
 			</div>
@@ -50,13 +50,13 @@
 
 		<script>
 			//팝업 - 다다익선 상품보기 > 슬라이드
-			var moreSaleSwiper = new Swiper('.moresale_pop .swiper-container', {
+			var moreSaleSwiper = new Swiper('#moresalePop .swiper-tmtb-container', {
 				observer:true,
 				observeParents: true,
 				slidesPerView: 5,
 				spaceBetween: 20,
 				scrollbar: {
-					el: '.tmtbSalesPopup .swiper-scrollbar',
+					el: '#moresalePop .swiper-scrollbar',
 					hide: true,
 				},
 			});