Skip to content

Tab_Img+Product

샘플 페이지

Title

Title

HTML
<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
<h2 class="v-truncate v-title">Title</h2>
<script type="module">
if (!window.customElements.get('swiper-container')) {
import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
}
if (!window.customElements.get('tab-container')) {
import('/ui/element/tab-container.js');
}
</script>
<!-- 탭 -->
<tab-container active-index="0" role="tablist" class="v-tab">
<!-- … -->
</tab-container>
<!-- /탭 -->
<div class="v-tab-img-product v-side-margin">
<div class="v-tab-img-product-grid">
<!-- 이미지/기획전/동영상(텍스트-안) -->
<div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
<!-- … -->
</div>
<div class="v-tab-img-product__products">
<script type="module">
if (!window.customElements.get('swiper-container')) {
import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
}
</script>
<swiper-container
space-between="24"
slides-per-view="4"
slides-per-group="4"
navigation="true"
pagination="true"
class="v-carousel">
<swiper-slide>
<!-- 상품 모듈 -->
<div class="v-product-unit">
<!-- … -->
</div>
<!-- /상품 모듈 -->
</swiper-slide>
<!-- … -->
</swiper-container>
</div>
</div>
</div>
</section>