Swiper jQuery 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18722464/
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
Swiper jQuery slider
提问by Amar Syla
I am using the jQuery slider called Swiper in my project.
我在我的项目中使用名为 Swiper 的 jQuery 滑块。
http://www.idangero.us/sliders/swiper/
http://www.idangero.us/sliders/swiper/
I am new to programming (js / jquery). I want to execute a function, some jquery code to be more specific, whenever the first slide of the slider is active. I think their API makes this possible, but I have no idea how to use. If somebody could help, I'd appreciate. Here's their API:
我是编程新手（js / jquery）。我想在滑块的第一张幻灯片处于活动状态时执行一个函数，一些更具体的 jquery 代码。我认为他们的 API 使这成为可能，但我不知道如何使用。如果有人可以提供帮助，我将不胜感激。这是他们的API：
http://www.idangero.us/sliders/swiper/api.php
http://www.idangero.us/sliders/swiper/api.php
Thanks.
谢谢。
回答by Robert
I build a little demo in jsfiddle to demonstrate how to react on slide events with "swiper":
我在 jsfiddle 中构建了一个小演示来演示如何使用“swiper”对幻灯片事件做出反应：
Use the Event-Callback functions by swiper, as mentioned in the API-docu.
如 API 文档中所述，通过 swiper 使用事件回调函数。
$(document).ready(function () {
$(function () {
var mySwiper = $('.swiper-container').swiper({
mode: 'horizontal',
watchActiveIndex: true,
loop: true,
onSlideChangeStart: function (swiper) {
console.log('slide change start - before');
console.log(swiper);
console.log(swiper.activeIndex);
//before Event use it for your purpose
},
onSlideChangeEnd: function (swiper) {
console.log('slide change end - after');
console.log(swiper);
console.log(swiper.activeIndex);
//after Event use it for your purpose
if (swiper.activeIndex == 1) {
//First Slide is active
console.log('First slide active')
}
}
});
})
});
回答by ekeitho
Doesn't seem that the other jsfiddle example works anymore. For others who want to get the right libraries set up to see this working, see:
其他 jsfiddle 示例似乎不再起作用了。对于想要设置正确的库以查看此工作的其他人，请参阅：
http://jsfiddle.net/kp8a8ugd/1/
http://jsfiddle.net/kp8a8ugd/1/
var swiper = new Swiper('.swiper-container'); //just a simple setup
