jquery - 使用 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);

运行过渡到索引号等于“index”参数的幻灯片，速度等于“speed”参数。您可以将 '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 );
});