Swiper
이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트입니다.
Getting Started With Swiper
Plugin 다운로드 옵션값 바로가기 사이트 바로가기Slide
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
...
</div>
</div>
new Swiper('.my-swiper', {
// ...
});
Navigation
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
...
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
new Swiper('.my-swiper', {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
Pagination
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
...
</div>
<div class="swiper-pagination"></div>
</div>
new Swiper('.my-swiper', {
pagination: {
el: ".swiper-pagination",
},
});