Skip to content
SHINSEGAE V UI

SILIVE+Product

TITLE

PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE
TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE
TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE
TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE
SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE
TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE
PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME PRODUCT NAME
000,000
SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE SMALL TITLE
TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE
HTML
<script type="module">
  if (!window.customElements.get("swiper-container")) {
    import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
  }
  if (!window.customElements.get("video-player")) {
    import("/ui/element/video-player.js");
  }
</script>


<section class="v-tmpl v-tmpl--silive-product">
  <h2 class="v-truncate v-title">TITLE</h2>


  <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"
    ><!-- 1.5 피카부 -->
    <swiper-slide>
      <div class="v-video-product">
        <div class="v-video-product__banner">
          <div class="v-video-product__video">
            <!-- Media Embed, Video Player -->
            <div class="v-media-embed v-media-embed--dim v-media-embed--cover">
              <video-player
                autoplay
                currenttimedisplay
                class="v-video-player v-media-embed__element v-media-embed__video"
              >
                <video poster="/path/to/poster.jpg" playsinline>
                  <source
                    src="/dummy/videos/candle-and-coffee.mp4"
                    type="video/mp4"
                  />
                </video>
              </video-player>
            </div>
            <!-- /Media Embed, Video Player -->
          </div>
          <!-- onclick 주기 위한 버튼 추가되었습니다. -->
          <button class="v-video-product__live-button" onclick="clickHandler">
            라이브 재생
          </button>
          <a href="/path/to/link" class="v-video-product__link">
            <div class="v-video-product__product">
              <div class="v-media-embed v-video-product__thumbnail">
                <img
                  class="v-media-embed__element v-media-embed__image"
                  src="/path/to/image.jpg"
                  alt=""
                  width="60"
                  height="90"
                />
              </div>
              <div class="v-video-product__info">
                <div class="v-truncate v-video-product__name">PRODUCT NAME</div>
                <div class="v-line-clamp-2 v-video-product__name">PRODUCT NAME</div>
                <div class="v-truncate v-video-product__price">000,000</div>
              </div>
            </div>
          </a>
        </div>
        <div class="v-video-product__text">
          <div class="v-truncate v-video-product__small-title">SMALL TITLE</div>
          <div class="v-truncate v-video-product__title">TITLE</div>
        </div>
      </div>
    </swiper-slide>


    <!-- … -->
  </swiper-container>
</section>