[스킨공통] 홈 커버 슬라이드 자동 재생
2023. 10. 8. 12:12
* 이미지에는 화살표 (좌,우)가 들어가있으나 아래 소스 적용시 화살표는 보이지 않습니다
1. 스킨편집하기 > html > ctrl + f (검색) > <!--cover (swiper)--> 검색
위 <!--cover (swiper)--> ~ <!--cover (swiper)--> 까지 선택 (아래 이미지 참고)
2. 위의 이미지에서 선택된 소스를 아래 소스로 변경해줍니다.
<!--cover (swiper)-->
<s_cover name="c-swiper">
<div class="c-swiper inner">
<div class="c-title">
<span> [★##_cover_title_##★] </span>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<s_cover_item>
<div class="swiper-slide">
<s_cover_item_thumbnail>
<a href="[★##_cover_item_url_##★]" class="thumb_l" taget="blank_">
<img src="[★##_cover_item_thumbnail_##★]">
</a>
</s_cover_item_thumbnail>
</div>
</s_cover_item>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</s_cover>
<!--cover (swiper)-->
★ (6개) 은 꼭 빼주세요!!!
이미지 클릭시 새창으로 열기로 변경되어 있습니다.
새창으로 열기 변경은 <s_cover_item_thumbnail> 아래 target="blank_" 만 삭제해주면 됩니다!