Skip to content
SHINSEGAE V UI

이미지/기획전/동영상 + 상품 (피카부)

1 + 1.5
BRAND NAME
THIS IS A HEADLINE
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!
 BUTTON TEXT
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
HTML
<div class="v-banner-product">
  <div class="v-banner-product__banner">
    <!-- 이미지/기획전/동영상 -->
  </div>
  <div class="v-banner-product__products">
    <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="1.3725"
      free-mode="true"
      sticky="true"
      class="v-carousel"
    >
      <swiper-slide>
        <!-- 상품 유닛 -->
      </swiper-slide>
      …
    </swiper-container>
  </div>
</div>

1 + 2.5
BRAND NAME
THIS IS A HEADLINE
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, labore? Obcaecati tempora voluptate laboriosam impedit modi deleniti est sequi provident aliquam in at veniam ab asperiores, iusto, nihil reiciendis eligendi!
 BUTTON TEXT
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
BRAND NAME
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
HTML
<div class="v-banner-product">
  <div class="v-banner-product__banner">
    <!-- 이미지/기획전/동영상 -->
  </div>
  <div class="v-banner-product__products">
    <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"
      free-mode="true"
      sticky="true"
      class="v-carousel"
    >
      <swiper-slide>
        <!-- 상품 유닛 -->
      </swiper-slide>
      …
    </swiper-container>
  </div>
</div>