问题描述:

I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..

what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it

here is my javascript code

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

});

网友答案:

Try this:

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

And also, take a look at their API. http://www.idangero.us/swiper/api/

网友答案:

It's just simple with Swiper API, this would help you http://idangero.us/swiper/api/#parallax

相关阅读:
Top