javascript - Swiper jQuery 滑块

Question

我在我的项目中使用名为 Swiper 的 jQuery 滑块。

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

我是编程新手（js / jquery）。每当滑块的第一张幻灯片处于活动状态时，我想执行一个函数，更具体的一些 jquery 代码。我认为他们的 API 使这成为可能，但我不知道如何使用。如果有人可以提供帮助，我将不胜感激。这是他们的 API：

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

谢谢。

Answer 1

我在 jsfiddle 中构建了一个小演示，以演示如何使用“swiper”对幻灯片事件做出反应：

http://jsfiddle.net/KhgFX/2/

如 API-docu 中所述，通过 swiper 使用 Event-Callback 函数。

$(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')
                    }
                }
            });
        })

    });

Answer 2

似乎其他 jsfiddle 示例不再有效。对于想要设置正确的库以查看此功能的其他人，请参阅：

http://jsfiddle.net/kp8a8ugd/1/

var swiper = new Swiper('.swiper-container'); //just a simple setup