使用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

从文档页面:

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)

而已!