Skip to content
SHINSEGAE V UI

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>