타이머 + 상품
기본적으로 타이머와 상품의 조합이나 Timer+Product 전시 템플릿과 같이 타이틀이 붙는 경우 타이틀과 타이머 그룹핑을 해주기를 권장합니다.
<!-- 기본 구조 --><countdown-timer>…</countdown-timer><swiper-container> <!-- 상품 슬라이드 --></swiper-container>
<!-- 타이틀과 함께 사용 시 --><section> <header class="v-corner-header"> <h2 class="v-truncate v-title">TITLE</h2> <countdown-timer>…</countdown-timer> </header> <swiper-container> <!-- 상품 슬라이드 --> </swiper-container></section>
<!-- 아래와 같이 헤더 그룹핑 없이 사용하여도 시각적으로는 동일하게 노출되도록 작업은 되어있습니다. --><h2 class="v-truncate v-title">TITLE</h2><countdown-timer>…</countdown-timer><swiper-container> <!-- 상품 슬라이드 --></swiper-container>타이머+상품 (1개)
00
:
00
:
00
HTML
<!-- 타이머 --><script type="module"> if (!window.customElements.get("countdown-timer")) { import("/ui/element/countdown-timer.js"); }</script><countdown-timer start="20240301120000" end="20240308120000" class="v-countdown-timer"> <div data-timer="" class="active"> <span data-timer-hours="">23</span> : <span data-timer-minutes="">59</span> : <span data-timer-seconds="">13</span> </div></countdown-timer><!-- /타이머 -->
<!-- 상품 --><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"> <swiper-slide> <div class="v-product-unit"> <!-- 상품 유닛 --> </div> </swiper-slide>
<div slot="container-end"> <div class="v-carousel_slot_end"> <button type="button" class="v-button v-button--outlined v-button--full"> BUTTON </button> </div> </div></swiper-container><!-- /상품 -->타이머+상품 (1.5개)
00
:
00
:
00
HTML
<!-- 타이머 --><script type="module"> if (!window.customElements.get("countdown-timer")) { import("/ui/element/countdown-timer.js"); }</script><countdown-timer start="20240301120000" end="20240308120000" class="v-countdown-timer"> <div data-timer="" class="active"> <span data-timer-hours="">23</span> : <span data-timer-minutes="">59</span> : <span data-timer-seconds="">13</span> </div></countdown-timer><!-- /타이머 -->
<!-- 상품 --><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> <div class="v-product-unit"> <!-- 상품 유닛 --> </div> </swiper-slide>
<div slot="container-end"> <div class="v-carousel_slot_end"> <button type="button" class="v-button v-button--outlined v-button--full"> BUTTON </button> </div> </div></swiper-container><!-- /상품 -->타이머+상품 (2개)
00
:
00
:
00
HTML
<!-- 타이머 --><script type="module"> if (!window.customElements.get("countdown-timer")) { import("/ui/element/countdown-timer.js"); }</script><countdown-timer start="20240301120000" end="20240308120000" class="v-countdown-timer"> <div data-timer="" class="active"> <span data-timer-hours="">23</span> : <span data-timer-minutes="">59</span> : <span data-timer-seconds="">13</span> </div></countdown-timer><!-- /타이머 -->
<!-- 상품 --><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"> <swiper-slide> <div class="v-product-unit"> <!-- 상품 유닛 --> </div> </swiper-slide>
<div slot="container-end"> <div class="v-carousel_slot_end"> <button type="button" class="v-button v-button--outlined v-button--full"> BUTTON </button> </div> </div></swiper-container><!-- /상품 -->타이머+상품 (2.5개)
00
:
00
:
00
HTML
<!-- 타이머 --><script type="module"> if (!window.customElements.get("countdown-timer")) { import("/ui/element/countdown-timer.js"); }</script><countdown-timer start="20240301120000" end="20240308120000" class="v-countdown-timer"> <div data-timer="" class="active"> <span data-timer-hours="">23</span> : <span data-timer-minutes="">59</span> : <span data-timer-seconds="">13</span> </div></countdown-timer><!-- /타이머 -->
<!-- 상품 --><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> <div class="v-product-unit"> <!-- 상품 유닛 --> </div> </swiper-slide>
<div slot="container-end"> <div class="v-carousel_slot_end"> <button type="button" class="v-button v-button--outlined v-button--full"> BUTTON </button> </div> </div></swiper-container><!-- /상품 -->타이머+상품 (3개)
00
:
00
:
00
HTML
<!-- 타이머 --><script type="module"> if (!window.customElements.get("countdown-timer")) { import("/ui/element/countdown-timer.js"); }</script><countdown-timer start="20240301120000" end="20240308120000" class="v-countdown-timer"> <div data-timer="" class="active"> <span data-timer-hours="">23</span> : <span data-timer-minutes="">59</span> : <span data-timer-seconds="">13</span> </div></countdown-timer><!-- /타이머 -->
<!-- 상품 --><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"> <swiper-slide> <div class="v-product-unit"> <!-- 상품 유닛 --> </div> </swiper-slide>
<div slot="container-end"> <div class="v-carousel_slot_end"> <button type="button" class="v-button v-button--outlined v-button--full"> BUTTON </button> </div> </div></swiper-container><!-- /상품 -->