Go to a specific slide with iDangerous Swiper

user2654675 picture user2654675 · May 28, 2014 · Viewed 47.9k times · Source

If I have a custom menu.

How can I go to a specific slide at any moment in Swiper.js?

<div class="menu">
    <ul>
    <li class="slide-3">go to slide 3</li>
    <li class="slide-5">go to slide 5</li>
    <li class="slide-1">go to slide 1</li>
    </ul>
</div>

I tried something like this but is not working:

$('.slide-3').click(function(e) {
    e.preventDefault();
    $(".menu .active").removeClass('active');
    $(this).addClass('active');
    swipeTo( $('.pag2').index() );
});

Answer

cor picture cor · Jun 4, 2014

From the documentation page:

mySwiper.slideTo(index, speed, runCallbacks);

Run transition to the slide with index number equal to 'index' parameter for the speed equal to 'speed' parameter. You can set 'runCallbacks' to false (by default it is 'true') and transition will not produce onSlideChange callback functions.

So in your case, you first need to declare a variable for example:

var mySwiper = new Swiper('.swiper-container',{
    mode:'horizontal',
    loop: false
});

And then:

$('.slide-3').click(function(e) {
    e.preventDefault();
    $(".menu .active").removeClass('active');
    $(this).addClass('active');
    mySwiper.slideTo( $('.pag2').index(),1000,false );
});