Skip to content
SHINSEGAE V UI

이미지/기획전/동영상 + 상품

1 + 1
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
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
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
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
HTML
<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"
>
  <swiper-slide>
    <div class="v-banner-product">
      <div class="v-banner-product__banner">
        <!-- 이미지/기획전/동영상 -->
      </div>
      <div class="v-banner-product__products">
        <!-- 상품 유닛 -->
      </div>
    </div>
  </swiper-slide>
  …
</swiper-container>

1 + 2
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
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
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
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
HTML
<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"
>
  <swiper-slide>
    <div class="v-banner-product">
      <div class="v-banner-product__banner">
        <!-- 이미지/기획전/동영상 -->
      </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>

1 + 3
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
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
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
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
HTML
<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"
>
  <swiper-slide>
    <div class="v-banner-product">
      <div class="v-banner-product__banner">
        <!-- 이미지/기획전/동영상 -->
      </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>