Tab+Img+Product

샘플 페이지

관련 모듈

• 탭 + 상품

1+2 standard

1+2 standard

ALL BEAUTY WOMEN MEN BAG AHOES ACCESSARY SPORTS/LEISURE GOLF KIDS LIFE IPSUM LOREM

HTML

<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">1+2 standard</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">
    <!-- 이미지/기획전/동영상(텍스트-안) -->
    <div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
      <!-- … -->
    </div>
    <!-- /이미지/기획전/동영상(텍스트-안) -->

    <script type="module">
      if (!window.customElements.get('swiper-container')) {
        import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
      }
    </script>

    <swiper-container
      space-between="8"
      slides-per-view="2"
      slides-per-group="2"
      navigation="true"
      pagination="true"
      class="v-carousel v-tab-img-product__products">
      <swiper-slide>
        <!-- 상품 유닛 -->
        <div class="v-product-unit">
          <!-- … -->
        </div>
        <!-- /상품 유닛 -->
      </swiper-slide>
      <!-- … -->
    </swiper-container>

    <div class="v-button-wrap">
      <button type="button" class="v-button v-button--outlined v-button--full">
        <span class="v-button__text">BUY NOW</span>
      </button>
    </div>
  </div>
</section>

1+2 wide

1+2 wide

ALL BEAUTY WOMEN MEN BAG AHOES ACCESSARY SPORTS/LEISURE GOLF KIDS LIFE IPSUM LOREM

HTML

<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">1+2 wide</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-tab-img-product--wide">
    <!-- 이미지/기획전/동영상(텍스트-안) -->
    <div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
      <!-- … -->
    </div>
    <!-- /이미지/기획전/동영상(텍스트-안) -->

    <script type="module">
      if (!window.customElements.get('swiper-container')) {
        import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
      }
    </script>

    <swiper-container
      space-between="8"
      slides-per-view="2"
      slides-per-group="2"
      navigation="true"
      pagination="true"
      class="v-carousel v-tab-img-product__products">
      <swiper-slide>
        <!-- 상품 유닛 -->
        <div class="v-product-unit">
          <!-- … -->
        </div>
        <!-- /상품 유닛 -->
      </swiper-slide>
      <!-- … -->
    </swiper-container>

    <div class="v-button-wrap">
      <button type="button" class="v-button v-button--outlined v-button--full">
        <span class="v-button__text">BUY NOW</span>
      </button>
    </div>
  </div>
</section>

1+2.5 standard

1+2.5 standard

ALL BEAUTY WOMEN MEN BAG AHOES ACCESSARY SPORTS/LEISURE GOLF KIDS LIFE IPSUM LOREM

HTML

<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">1+2.5 standard</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">
    <!-- 이미지/기획전/동영상(텍스트-안) -->
    <div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
      <!-- … -->
    </div>
    <!-- /이미지/기획전/동영상(텍스트-안) -->

    <script type="module">
      if (!window.customElements.get('swiper-container')) {
        import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
      }
    </script>

    <swiper-container
      slides-offset-before="24"
      slides-offset-after="24"
      space-between="8"
      slides-per-view="2.7551"
      css-mode="true"
      free-mode="true"
      class="v-carousel v-tab-img-product__products">
      <swiper-slide>
        <!-- 상품 유닛 -->
        <div class="v-product-unit">
          <!-- … -->
        </div>
        <!-- /상품 유닛 -->
      </swiper-slide>
      <!-- … -->
    </swiper-container>

    <div class="v-button-wrap">
      <button type="button" class="v-button v-button--outlined v-button--full">
        <span class="v-button__text">BUY NOW</span>
      </button>
    </div>
  </div>
</section>

1+2.5 wide

1+2.5 wide

ALL BEAUTY WOMEN MEN BAG AHOES ACCESSARY SPORTS/LEISURE GOLF KIDS LIFE IPSUM LOREM

HTML

<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">1+2.5 wide</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-tab-img-product--wide">
    <!-- 이미지/기획전/동영상(텍스트-안) -->
    <div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
      <!-- … -->
    </div>
    <!-- /이미지/기획전/동영상(텍스트-안) -->

    <script type="module">
      if (!window.customElements.get('swiper-container')) {
        import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
      }
    </script>

    <swiper-container
      slides-offset-before="24"
      slides-offset-after="24"
      space-between="8"
      slides-per-view="2.7551"
      css-mode="true"
      free-mode="true"
      class="v-carousel v-tab-img-product__products">
      <swiper-slide>
        <!-- 상품 유닛 -->
        <div class="v-product-unit">
          <!-- … -->
        </div>
        <!-- /상품 유닛 -->
      </swiper-slide>
      <!-- … -->
    </swiper-container>

    <div class="v-button-wrap">
      <button type="button" class="v-button v-button--outlined v-button--full">
        <span class="v-button__text">BUY NOW</span>
      </button>
    </div>
  </div>
</section>

1+3 standard

1+3 standard

ALL BEAUTY WOMEN MEN BAG AHOES ACCESSARY SPORTS/LEISURE GOLF KIDS LIFE IPSUM LOREM

HTML

<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">1+3 standard</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">
    <!-- 이미지/기획전/동영상(텍스트-안) -->
    <div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
      <!-- … -->
    </div>
    <!-- /이미지/기획전/동영상(텍스트-안) -->

    <script type="module">
      if (!window.customElements.get('swiper-container')) {
        import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
      }
    </script>

    <swiper-container
      space-between="8"
      slides-per-view="3"
      slides-per-group="3"
      navigation="true"
      pagination="true"
      class="v-carousel v-tab-img-product__products">
      <swiper-slide>
        <!-- 상품 유닛 -->
        <div class="v-product-unit">
          <!-- … -->
        </div>
        <!-- /상품 유닛 -->
      </swiper-slide>
      <!-- … -->
    </swiper-container>

    <div class="v-button-wrap">
      <button type="button" class="v-button v-button--outlined v-button--full">
        <span class="v-button__text">BUY NOW</span>
      </button>
    </div>
  </div>
</section>

1+3 wide

1+3 wide

ALL BEAUTY WOMEN MEN BAG AHOES ACCESSARY SPORTS/LEISURE GOLF KIDS LIFE IPSUM LOREM

HTML

<section class="v-tmpl--tab-img-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">1+3 wide</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-tab-img-product--wide">
    <!-- 이미지/기획전/동영상(텍스트-안) -->
    <div class="v-media-banner v-media-banner--layered v-tab-img-product__banner">
      <!-- … -->
    </div>
    <!-- /이미지/기획전/동영상(텍스트-안) -->

    <script type="module">
      if (!window.customElements.get('swiper-container')) {
        import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
      }
    </script>

    <swiper-container
      space-between="8"
      slides-per-view="3"
      slides-per-group="3"
      navigation="true"
      pagination="true"
      class="v-carousel v-tab-img-product__products">
      <swiper-slide>
        <!-- 상품 유닛 -->
        <div class="v-product-unit">
          <!-- … -->
        </div>
        <!-- /상품 유닛 -->
      </swiper-slide>
      <!-- … -->
    </swiper-container>

    <div class="v-button-wrap">
      <button type="button" class="v-button v-button--outlined v-button--full">
        <span class="v-button__text">BUY NOW</span>
      </button>
    </div>
  </div>
</section>