Skip to a specific slide with iDangerous Swiper

Question

If I have a custom menu.

How can I go to a specific slide at any time 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 it doesn't work:

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

Answer 1

On the page :

 mySwiper.slideTo(index, speed, runCallbacks); 

Start the transition to the slide with the index number equal to the 'index' parameter for the speed equal to the "speed" parameter. You can set "runCallbacks" to false (the default is "true"), and the transition will not call the 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 ); }); 

Answer 2

To build on Ahmed’s answer, implement:

 var moveToClickedNumber = function(swiper){swiper.swipeTo(swiper.clickedSlideIndex)} var mySwiper = new Swiper('.swiper-container',{ mode:'horizontal', loop: false, onSlideClick: moveToClickedNumber, initialSlide: 0, //slide number which you want to show-- 0 by default }); 

Answer 3

Starting with version v3.0.x, this has been baked into the API.

Just enter slideToClickedSlide:true in your config. (default is false)

What is it!

Answer 4

Use inline callbacks

http://www.idangero.us/sliders/swiper/api.php

mySwiper.clickedSlideIndex - returns the index number of the affected / clicked slide. For use only with onSlideTouch and onSlideClick callbacks.

mySwiper.clickedSlide - returns a moved / clicked slide (slide instance, HTMLElement). For use only with onSlideTouch and onSlideClick callbacks.