jQuery 使用 iDangerous Swiper 转到特定幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23922480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Go to a specific slide with iDangerous Swiper
提问by user2654675
If I have a custom menu.
如果我有自定义菜单。
How can I go to a specific slide at any moment in Swiper.js?
如何在 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>
I tried something like this but is not working:
我试过这样的事情，但没有奏效：
$('.slide-3').click(function(e) {
e.preventDefault();
$(".menu .active").removeClass('active');
$(this).addClass('active');
swipeTo( $('.pag2').index() );
});
回答by cor
From the documentationpage:
从文档页面：
mySwiper.slideTo(index, speed, runCallbacks);
Run transition to the slide with index number equal to 'index' parameter for the speed equal to 'speed' parameter. You can set 'runCallbacks' to false (by default it is 'true') and transition will not produce onSlideChange callback functions.
运行过渡到索引号等于 'index' 参数的幻灯片，速度等于 'speed' 参数。您可以将 'runCallbacks' 设置为 false（默认情况下为 'true'）并且转换不会产生 onSlideChange 回调函数。
So in your case, you first need to declare a variable for example:
因此，在您的情况下，您首先需要声明一个变量，例如：
var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',
loop: false
});
And then:
进而：
$('.slide-3').click(function(e) {
e.preventDefault();
$(".menu .active").removeClass('active');
$(this).addClass('active');
mySwiper.slideTo( $('.pag2').index(),1000,false );
});
回答by DrewB
To build on Ahmed's answer, to implement:
以艾哈迈德的回答为基础，实施：
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
});
回答by mix3d
As of the v3.0.x version, this has been baked into the API.
从 v3.0.x 版本开始，这已融入 API。
Simply initialize with slideToClickedSlide:truein your config. (defaults to false)
只需slideToClickedSlide:true在您的配置中初始化。（默认为假）
That's it!
就是这样！
回答by HSN KH
function goToPage(numberPage){
new Swiper('.swiper-container').slideTo(numberPage,1000,false)
}
goToPage(10);
回答by Ahmed Abdelrazik
Use built in callbacks
使用内置回调
http://www.idangero.us/sliders/swiper/api.php
http://www.idangero.us/sliders/swiper/api.php
mySwiper.clickedSlideIndex - returns the index number of touched/clicked slide. For use only with "onSlideTouch" and "onSlideClick" callbacks.
mySwiper.clickedSlideIndex - 返回触摸/点击幻灯片的索引号。仅用于“onSlideTouch”和“onSlideClick”回调。
mySwiper.clickedSlide - returns the touched/clicked slide (slide instance, HTMLElement). For use only with "onSlideTouch" and "onSlideClick" callbacks.
mySwiper.clickedSlide - 返回触摸/点击的幻灯片（幻灯片实例，HTMLElement）。仅用于“onSlideTouch”和“onSlideClick”回调。
