使用iDangerous Swiper转到特定幻灯片

Question

如果我有一个自定义菜单的话。

如何在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>

我尝试过这样的方法，但不起作用：

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

Answer 1

在documentation页面中：

mySwiper.slideTo(index, speed, runCallbacks);

对速度等于' speed‘参数的索引编号等于' index’参数的幻灯片运行转场。您可以将'runCallbacks‘设置为false (默认情况下为'true')，并且转换不会生成onSlideChange回调函数。

因此，在您的示例中，您首先需要声明一个变量，例如：

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

然后：

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

Answer 2

以艾哈迈德的回答为基础，实现：

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

从v3.0.x版本开始，这已经被加入到API中。

只需在您的配置中使用slideToClickedSlide:true进行初始化。(默认为false)

就这样!