Swiper jQuery slider

Swiper jQuery slider

本文关键字：slider jQuery Swiper      更新时间：2023-09-26

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

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

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

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

谢谢。

我在jsfiddle中构建了一个小演示来演示如何使用"swipeper"对幻灯片事件做出反应：

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

通过滑动器使用事件回调函数，如 API 文档中所述。

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

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

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

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

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
相关文章：