Timer+Product
<!-- 권장 마크업 --><section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">TITLE</h2> <countdown-timer>…</countdown-timer> </header> <swiper-container> <!-- 상품 슬라이드 --> </swiper-container></section>
<!-- 여건이 여의치 않으면 아래와 같이 section, header 없어도 노출은 동일 --><h2 class="v-truncate v-title">TITLE</h2><countdown-timer>…</countdown-timer><swiper-container> <!-- 상품 슬라이드 --></swiper-container>타이머 표시 형식
타이머는 두 가지 형식으로 표시할 수 있습니다:
시/분/초 형식 (기본)
<countdown-timer> <div data-timer> <span data-timer-hours>00</span>: <span data-timer-minutes>00</span>: <span data-timer-seconds>00</span> </div></countdown-timer>일/시/분/초 형식
<countdown-timer> <div data-timer> <span data-timer-days>00</span>일 <span data-timer-hours>00</span>시간 <span data-timer-minutes>00</span>분 <span data-timer-seconds>00</span>초 </div></countdown-timer>참고: data-timer-days 요소의 존재 여부에 따라 타이머 표시 형식이 결정됩니다.
- 있으면: 일/시/분/초 형식
- 없으면: 일을 시간으로 변환하여 시/분/초 형식 (예: 1일 5시간 → 29시간)
타이머+상품 (1개)
HOT DEAL
00
:
00
:
00
HTML
<section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">HOT DEAL</h2>
<!-- 타이머 --> <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>58</span> : <span data-timer-seconds>58</span> </div> </countdown-timer> <!-- /타이머 --> </header>
<!-- 상품 --> <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> <!-- /상품 --></section>타이머+상품 (1.5개)
HOT DEAL
00
:
00
:
00
HTML
<section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">HOT DEAL</h2>
<!-- 타이머 --> <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>58</span> : <span data-timer-seconds>58</span> </div> </countdown-timer> <!-- /타이머 --> </header>
<!-- 상품 --> <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> <!-- /상품 --></section>타이머+상품 (2개)
HOT DEAL
00
:
00
:
00
HTML
<section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">HOT DEAL</h2>
<!-- 타이머 --> <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>58</span> : <span data-timer-seconds>58</span> </div> </countdown-timer> <!-- /타이머 --> </header>
<!-- 상품 --> <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> <!-- /상품 --></section>타이머+상품 (2.5개)
HOT DEAL
00
:
00
:
00
HTML
<section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">HOT DEAL</h2>
<!-- 타이머 --> <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>58</span> : <span data-timer-seconds>58</span> </div> </countdown-timer> <!-- /타이머 --> </header>
<!-- 상품 --> <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> <!-- /상품 --></section>타이머+상품 (3개)
HOT DEAL
00
:
00
:
00
HTML
<section class="v-tmpl v-tmpl--timer-product"> <header class="v-corner-header"> <h2 class="v-truncate v-title">HOT DEAL</h2>
<!-- 타이머 --> <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>58</span> : <span data-timer-seconds>58</span> </div> </countdown-timer> <!-- /타이머 --> </header>
<!-- 상품 --> <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> <!-- /상품 --></section>