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

从文档页面：

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在您的配置中初始化。（默认为假）

而已！

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”回调。

Answer 6

要完成上述答案，对于那些使用拇指库的人，您只需添加.slideTo(index, 0, false);您的顶级 Swiper。

这是有关如何实现它的示例：

// Use your own classes and index variable
var swiperThumbs = new Swiper(".mySwiperThumbs", {
  loop: true
});

var swiperTop = new Swiper(".mySwiperTop", {
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: swiperThumbs,
  },
}).slideTo(index, 0, false);