<site-swiper data-config='{
"slidesPerView": "auto",
"spaceBetween": 10
}'>
<div class="swiper-slide">
<img src="assets/images/swiper-slide-1.png" alt="슬라이드1">
</div>
<div class="swiper-slide">
<img src="assets/images/swiper-slide-2.png" alt="슬라이드2">
</div>
<div class="swiper-slide">
<img src="assets/images/swiper-slide-3.png" alt="슬라이드3">
</div>
</site-swiper>
<site-swiper data-config='{
"direction": "vertical",
"slidesPerView": 1,
"spaceBetween": 10,
"height": 300,
"navigation": false
}'>
<div class="swiper-slide">
<img src="assets/images/swiper-slide-1.png" alt="슬라이드1">
</div>
<div class="swiper-slide">
<img src="assets/images/swiper-slide-2.png" alt="슬라이드2">
</div>
<div class="swiper-slide">
<img src="assets/images/swiper-slide-3.png" alt="슬라이드3">
</div>
</site-swiper>
<site-swiper data-config='{
"slidesPerView": 2.5,
"spaceBetween": 20,
"freeMode": true,
"grabCursor": true,
"navigation": false,
"pagination": false,
"centeredSlides": false,
"freeMode": {
"enabled": true,
"sticky": true
},
"breakpoints": {
"640": {
"slidesPerView": 1.2
},
"768": {
"slidesPerView": 1.8
},
"1024": {
"slidesPerView": 2.5
}
}
}'>
<div class="swiper-slide" style="width: auto;">
<div class="card">슬라이드 1</div>
</div>
<div class="swiper-slide" style="width: auto;">
<div class="card">슬라이드 2</div>
</div>
<!-- 자유롭게 드래그 가능한 프리 모드 -->
</site-swiper>
<site-swiper data-config='{
"parallax": true,
"speed": 800,
"slidesPerView": 1
}'>
<div class="swiper-slide">
<div data-swiper-parallax="-100">제목</div>
<div data-swiper-parallax="-200">부제목</div>
<div data-swiper-parallax="100">배경 요소</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="-150">다른 슬라이드</div>
</div>
<!-- 각 요소가 다른 속도로 움직여 깊이감 연출 -->
</site-swiper>
<site-swiper data-config='{
"spaceBetween": 40,
"slidesPerView": "auto",
"navigation": false,
"pagination": false,
"autoplay": {
"delay": 0,
"disableOnInteraction": false
},
"speed": 3000,
"loop": true,
"loopAdditionalSlides": 1
}'>
<div class="swiper-slide">
<div class="logo-item">LOGO</div>
</div>
<div class="swiper-slide">
<div class="logo-item">LOGO</div>
</div>
<!-- 자동으로 연속 스크롤되는 마퀴 효과 -->
</site-swiper>
모달 내용
<site-modal id="myModal">
<div class="modal-header">
<h2>모달 제목</h2>
</div>
<div class="modal-body">
<p>모달 내용</p>
</div>
<div class="modal-footer">
<button onclick="document.getElementById('myModal').close()">닫기</button>
</div>
</site-modal>
<button onclick="document.getElementById('myModal').open()">모달 열기</button>
<site-tabs>
<div class="tab-names">
<div class="tab-name">탭 1</div>
<div class="tab-name">탭 2</div>
</div>
<div class="tab-contents">
<div class="tab-content">탭 1 내용</div>
<div class="tab-content">탭 2 내용</div>
</div>
</site-tabs>
<button onclick="window.showToast('복사되었습니다!', {type:'success'})">성공 토스트</button>
<site-toast></site-toast>
<site-accordion>
<div class="accordion-item">
<div class="accordion-title">Q. 배송은 얼마나 걸리나요?</div>
<div class="accordion-content">
<div class="accordion-body">A. 보통 1~2일 이내 출고됩니다.</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">Q. 교환/반품은 어떻게 하나요?</div>
<div class="accordion-content">
<div class="accordion-body">A. 마이페이지에서 신청 가능합니다.</div>
</div>
</div>
</site-accordion>
<!-- 기본 카운트다운 (일/시간/분/초) -->
<site-countdown
data-target="2025-01-01"
data-format="DHMS">
</site-countdown>
<!-- 시간/분/초만 표시 -->
<site-countdown
data-target="2024-12-25"
data-format="HMS">
</site-countdown>
<!-- 분/초만 표시 -->
<site-countdown
data-target="2024-12-19 12:00"
data-format="MS">
</site-countdown>
<!-- 지원하는 다양한 포맷들 -->
<site-countdown data-target="2025-01-01"></site-countdown> <!-- 2025-01-01 -->
<site-countdown data-target="2025/01/01"></site-countdown> <!-- 2025/01/01 -->
<site-countdown data-target="2025.01.01"></site-countdown> <!-- 2025.01.01 -->
<site-countdown data-target="2025-01-01 15:30"></site-countdown> <!-- 2025-01-01 15:30 -->
예시 코드를 복사해서 원하는 곳에 붙여넣으세요
<site-swiper>...</site-swiper>
<site-modal>...</site-modal>
<site-tabs>...</site-tabs>
showToast('메시지')
<site-accordion>...</site-accordion>
<site-countdown>...</site-countdown>