Question

我正在使用swiper图像滑块，根据他们的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  
    });

Answer 1

试试这个：

        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/

Answer 2

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

图像滑块Swiper功能

2 个答案: