Img(1)+Text(밖)+Product

1 + 1 STANDARD

1+1 STANDARD

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+1 STANDARD</h2>
  <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="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--stretched">
            <!-- … -->
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <!-- 상품 유닛 -->
          <div class="v-product-unit">
            <!-- … -->
          </div>
          <!-- /상품 유닛 -->
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

1 + 1 WIDE

1+1 WIDE

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+1 WIDE</h2>
  <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="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel--wide v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--wide">
            <!-- … -->
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <!-- 상품 유닛 -->
          <div class="v-product-unit v-side-margin">
            <!-- … -->
          </div>
          <!-- /상품 유닛 -->
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

1 + 2 STANDARD

1+2 STANDARD

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-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");
    }
  </script>

  <swiper-container
    space-between="8"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--stretched">
            <!-- … -->
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_2">
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

1 + 2 WIDE

1+2 WIDE

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-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");
    }
  </script>

  <swiper-container
    space-between="8"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel--wide v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--wide">
            <!-- … -->
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_2 v-side-margin">
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

1 + 3 STANDARD

1+3 STANDARD

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-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");
    }
  </script>

  <swiper-container
    space-between="8"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--stretched">
            <!-- … -->
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_3">
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

1 + 3 WIDE

1+3 WIDE

HTML

<section
  class="v-tmpl v-tmpl--img-1-text-out-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");
    }
  </script>

  <swiper-container
    space-between="8"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel--wide v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--wide">
            <!-- … -->
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_3 v-side-margin">
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>