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

- user2654675

---

我知道这是一个老问题，但标记答案正确是一种良好的礼仪！ :) 但是，一个两年内只有1个问题的用户也可能不会回来。 - mix3d

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

- cor

---

@ImranBughio，你是对的，自从我写下答案以来，文档已经改变了。我已经更新了它；）谢谢！ - cor

注意：如果您正在使用Swiper v2，则需要使用swipeTo()而不是slideTo()。 - BadHorsie

是的，@BadHorsie，但他们在v3上更改了该功能，现在他们正在使用v3.3.1。 - cor

我知道，这就是我的意思。我不得不在一个使用v2的网站上工作。 - BadHorsie

Answer 2

在Ahmed的回答基础上，要实现：

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

- DrewB

---

从v3.x版本开始，这已经直接实现到API中了。 - mix3d

Answer 3

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

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

就是这样简单!

- mix3d

---

很遗憾，我无法让它正常工作。我的所有幻灯片都是动态加载的 - 我想这就是为什么它对我不起作用的原因。 - rpivovar

@rpivovar 尝试创建一个新问题，附上您的具体代码示例并引用此问题。 - mix3d

Answer 4

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


goToPage(10);

- hassan khademi

---

非常简单，节省了我的时间。谢谢。 - Muddasir23

Answer 5

为了完成上面的答案，对于那些正在使用拇指画廊的人，你必须在你的顶部 Swiper 中添加 .slideTo(index, 0, false);。

这是一个实现它的示例：

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

- Claire Lavigne

Answer 6

使用内置的回调函数。

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

mySwiper.clickedSlideIndex - 返回被触摸/点击幻灯片的索引号。仅与“onSlideTouch”和“onSlideClick”回调一起使用。

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

- Ahmed Abdelrazik