상품상세 동영상 수정, 브랜드검색팝업 스크롤적용

src/main/webapp/WEB-INF/views/web/display/BrandSearchLayerWeb.html

@@ -54,20 +54,29 @@
 					<button type="button" onclick="fnRealtimeGoodsList();"><span><em class="time" th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</em> 기준</span></button>
 				</div>
 				<div class="realtime_wrap">
-					<div class="itemsGrp" id="itemViewArea">
-						<th:block th:each="item, status : ${realtimeGoodsList}">
-							<div class="item_prod">
-								<div class="item_state">
-									<a th:href="${item.itemUrl}" class="itemLink">
-										<div class="itemPic">
-											<img alt="" class="vLHTC pd_img" th:src="${item.imageUrl}">
+				
+					<div class="swiper-container">
+	           			<div class="swiper-wrapper itemsGrp" id="itemViewArea">
+							<th:block th:each="item, status : ${realtimeGoodsList}">
+								<div class="swiper-slide">
+									<div class="item_prod">
+										<div class="item_state">
+											<a th:href="${item.itemUrl}" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" th:src="${item.imageUrl}">
+												</div>
+												<div class="itemName" th:text="${item.itemName}"></div>
+												<div class="viewCount"><span th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}"></span></div>
+											</a>
 										</div>
-										<div class="itemName" th:text="${item.itemName}"></div>
-										<div class="viewCount"><span th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}"></span></div>
-									</a>
+									</div>
 								</div>
-							</div>
-						</th:block>
+							</th:block>
+						</div>
+						<div class="swiper-controls">
+			                <div class="swiper-scrollbar"></div>
+			            </div>
+						
 					</div>
 				</div>
 			</div>
@@ -165,11 +174,27 @@
 		cfnGoToPage(actionUrl);
 	});
 
+	var submain_slide;
 	$(document).ready( function() {
 		$("#brand_layer_search").addClass('active');
 
 		//통합검색 - 검색어 입력 시
 		//
+		
+		// 지금 고객님들이 많이 보고 있어요
+		//210730_ 추가 : 지금 고객님들이 많이 보고 있어요 슬라이드 swiper 옵션 추가.
+		submain_slide = new Swiper('.realtime_wrap .swiper-container', {
+			slidesPerView: 5,
+			watchOverflow:true,
+			freeMode:true,
+			observer: true,
+			observeParents: true,
+			speed:1000,
+			scrollbar: {
+				el: '.realtime_wrap .swiper-scrollbar',
+				hide: false,
+			},
+		});
 	});
 
 	// 검색어 찾기
@@ -333,24 +358,41 @@
 		$.getJSON('/display/realtime/goods/list', function (result){
 			if(result.length > 0){
 				$.each(result, function (idx, item){
-					html += '<div class="item_prod">\n';
-					html += '	<div class="item_state">\n';
-					html += '		<a href="'+item.itemUrl+'" class="itemLink">\n';
-					html += '			<div class="itemPic">\n';
-					html += '				<img alt="" class="vLHTC pd_img" src="'+item.imageUrl+'">\n';
-					html += '			</div>\n';
-					html += '			<div class="itemName">'+item.itemName+'</div>\n';
+					html += '<div class="swiper-slide">\n';
+					html += '	<div class="item_prod">\n';
+					html += '		<div class="item_state">\n';
+					html += '			<a href="'+item.itemUrl+'" class="itemLink">\n';
+					html += '				<div class="itemPic">\n';
+					html += '					<img alt="" class="vLHTC pd_img" src="'+item.imageUrl+'">\n';
+					html += '				</div>\n';
+					html += '				<div class="itemName">'+item.itemName+'</div>\n';
 					if(item.count < 10){
 						html += '			<div class="viewCount"><span>10명</span> 미만</div>\n';
 					}else{
 						html += '			<div class="viewCount"><span>'+item.count.addComma()+'</span>명 보는중</div>\n';
 					}
-					html += '		</a>\n';
+					html += '			</a>\n';
+					html += '		</div>\n';
 					html += '	</div>\n';
 					html += '</div>\n';
-				});
+									
+				})
 			}
 			$("#itemViewArea").append(html);
+			
+			// 슬라이드 사이즈 때문에 재설정함
+			submain_slide = new Swiper('.realtime_wrap .swiper-container', {
+				slidesPerView: 5,
+				watchOverflow:true,
+				freeMode:true,
+				observer: true,
+				observeParents: true,
+				speed:1000,
+				scrollbar: {
+					el: '.realtime_wrap .swiper-scrollbar',
+					hide: false,
+				},
+			});
 		});
 	}
 

src/main/webapp/ux/mo/css/layout_m.css

@@ -467,7 +467,8 @@
 .pd_detail > .inner.wide{padding-left:0!important; padding-right:0!important; padding-bottom:0;}
 .pd_detail .movbox {position: relative;height: 0;padding-top: 100%;padding-bottom:50.25%;overflow: hidden;transition: all 300ms ease;transform: scale(1);}
 .pd_detail .movbox #prodMovBtn{background: rgb(246 55 55 / 0%);  position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;color: transparent;font-size: 0.1rem;z-index: 2;}
-.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;}
+/* .pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;} */
+.pd_detail .movbox iframe{position: absolute;right: 0;top: 0;bottom: 0;width: 300%;height: 100%;z-index: 1;left:-100%}
 .pd_detail .thumb_box{position: relative;}
 .pd_detail .thumb_box .thumb_list{position:relative;}
 .pd_detail .thumb_box .thumb_list .thumb{position:relative; width:100%; padding-bottom: 150%;; background-color:#f5f5f5; overflow: hidden;}

src/main/webapp/ux/pc/css/layout.css

@@ -2516,7 +2516,8 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_detail .thumb img,
 	.pd_detail .thumb video {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%) ; z-index:2;}
 	.pd_detail .movbox {position: relative;height: 0;padding-top: 100%;padding-bottom:50.25%;overflow: hidden;transition: all 300ms ease;transform: scale(1);}
-	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;pointer-events:none;left: -83.45%;width: 185%;}
+	/* .pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;pointer-events:none; left: -83.45%;width: 185%;} */
+	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 300%;height: 100%;z-index: 1;pointer-events:none; left: -100%;}
 	.pd_detail .movbox iframe[src*="youtu"] {left:0; width: 100%;}
 	.pd_detail .btn_popup {display:inline-block; padding:0px; box-sizing:border-box;}
 	.pd_detail .btn_popup span {color:#888; font-size:12px; font-weight:200; border-bottom:1px solid #888;}