图像滑块滑动器功能

Image Slider Swiper function

本文关键字：功能 图像      更新时间：2023-09-26

我正在使用滑动器图像滑块，根据他们的API，我应该可以有回调功能，但它不起作用。。我想做的是，我有一个容器，在我的图像上有一个不透明度的文本：0，还有一个css动画类，我想添加到我的容器中，所以页面一加载，我就希望动画在第一张幻灯片上开始，下一张幻灯片也一样，从没有css类开始，将css类添加到

这是我的javascript代码

var mySwiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        speed: 600,
        effect: 'fade',
        fade: {
             crossFade: true
        },
        onSlideChangeStart: function (Swiper){
            $('.slide-info').addClass('slider-text-animation ');
        },
        onSlideChangeEnd: function (Swiper){
            $('.slide-info').removeClass('slider-text-animation ');
        },
        loop: true,
        autoplay: 6500  
    });

试试这个：

        mySwiper.on('slideChangeStart', function () {
            $('.slide-info').addClass('slider-text-animation ');
        });
        mySwiper.on('slideChangeEnd', function () {
            $('.slide-info').removeClass('slider-text-animation ');
        });

同时，看看他们的API。http://www.idangero.us/swiper/api/

使用Swiper API很简单，这将帮助您http://idangero.us/swiper/api/#parallax

相关文章：