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 );
});

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）

就是这样！

Answer 4

 function goToPage(numberPage){
  new Swiper('.swiper-container').slideTo(numberPage,1000,false)
}


goToPage(10);

Answer 5

使用内置回调

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

mySwiper.clickedSlideIndex - 返回已触摸/点击的幻灯片的索引号。仅用于“onSlideTouch”和“onSlideClick”回调。

mySwiper.clickedSlide - 返回已触摸/点击的幻灯片（幻灯片实例，HTMLElement）。仅用于“onSlideTouch”和“onSlideClick”回调。

使用iDangerous Swiper转到特定幻灯片

5 个答案: