|
|
@@ -43,14 +43,14 @@
|
|
|
<!-- 장바구니 내용 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="content od_recommend">
|
|
|
+ <div class="content od_recommend od_recommend_area">
|
|
|
<div class="cont_head">
|
|
|
<h4 class="subH1 t_c mb40">추천상품</h4>
|
|
|
</div>
|
|
|
<div class="cont_body">
|
|
|
- <div class="swiper-container">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
|
|
|
+ <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
|
|
|
+ <div class="swiper-slide swiper-slide-active" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -74,7 +74,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide swiper-slide-next" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -98,7 +98,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -122,7 +122,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -146,7 +146,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -170,7 +170,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -195,7 +195,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -220,7 +220,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
+ <div class="swiper-slide" style="width: 276px; margin-right: 20px;">
|
|
|
<div class="item_prod">
|
|
|
<div class="item_state">
|
|
|
<button type="button" class="itemLike">관심상품 추가</button>
|
|
|
@@ -246,6 +246,193 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Add Pagination -->
|
|
|
+ <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span></div>
|
|
|
+ <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
|
|
|
+ <!-- Add Arrows -->
|
|
|
+ <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
|
|
|
+ <div class="swiper-button-prev swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content od_recommend od_realtime">
|
|
|
+ <div class="cont_head">
|
|
|
+ <h4 class="subH1 t_c mb40">지금 많이 보고 있어요</h4>
|
|
|
+ </div>
|
|
|
+ <div class="cont_body">
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME1</p>
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME2</p>
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME3</p>
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME4</p>
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME5</p>
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME6</p>
|
|
|
+
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME7</p>
|
|
|
+
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod5.jpg">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand">BRAND NAME8</p>
|
|
|
+ <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
|
|
|
+ <p class="itemPrice">80,100
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
+ </p>
|
|
|
+ <div class="itemViewCount">
|
|
|
+ <span>304</span>명 보는중
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- Add Pagination -->
|
|
|
<div class="swiper-pagination"></div>
|
|
|
</div>
|
|
|
<!-- Add Arrows -->
|
|
|
@@ -400,18 +587,32 @@
|
|
|
|
|
|
$(function(){
|
|
|
//추천상품 슬라이드
|
|
|
- var rcmdItemSwiper = new Swiper('.od_recommend .swiper-container', {
|
|
|
+ var rcmdItemSwiper = new Swiper('.od_recommend_area .swiper-container', {
|
|
|
slidesPerView: 5,
|
|
|
- spaceBetween: 0,
|
|
|
+ spaceBetween: 20,
|
|
|
navigation: {
|
|
|
- nextEl: '.od_recommend .swiper-button-next',
|
|
|
- prevEl: '.od_recommend .swiper-button-prev',
|
|
|
+ nextEl: '.od_recommend_area .swiper-button-next',
|
|
|
+ prevEl: '.od_recommend_area .swiper-button-prev',
|
|
|
},
|
|
|
pagination: {
|
|
|
- el: '.od_recommend .swiper-pagination',
|
|
|
+ el: '.od_recommend_area .swiper-pagination',
|
|
|
clickable: true,
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
+ //지금 많이 보고 있어요 슬라이드
|
|
|
+ var realtimeItemSwiper = new Swiper('.od_realtime .swiper-container', {
|
|
|
+ slidesPerView: 5,
|
|
|
+ spaceBetween: 20,
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.od_realtime .swiper-button-next',
|
|
|
+ prevEl: '.od_realtime .swiper-button-prev',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.od_realtime .swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
</th:block>
|