[jQuery] Swiper Options 자주 사용하는 옵션

여러모로 다양하게 활용이 가능한 jQuery 슬라이더 Swiper https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

Swiper 기본 스크립트

var swiper = new Swiper('.swiper', {
        slidesPerView: 1,        
        speed:1000,
        autoplay: {
            delay: 2000
        },
        spaceBetween: 0,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }, 
        breakpoints: {
            1023: {
                slidesPerView:  'auto',
                spaceBetween: 20
            }
         },          
                             
    });

 

 

자주 사용하는 옵션/스크립트

 

1. 슬라이드가 자동으로 넘어가게 한 뒤, 마지막 슬라이드에서 멈추게 하는 스크립트

swiper.on('reachEnd', function(){
    swiper.autoplay = false;
});

 

 

2. 링크 클릭 시 특정 슬라이드로 이동

<a href="#" id="slide3">Swipe to slide 3</a>

var swiper = new Swiper('.swiper-container', {})
$('#slide3').click(swiper,function(){
    swiper.slideTo(3);
})