问题:

I am trying to setup swiper so that it fades in a div on each slide.

The slides would look like this

<div class="swiper-slide">
            <img src="http://fpoimg.com/300x200?text=Promotion&bg_color=e6e6e6&text_color=ffffff" class="animated fadeInUp"/>
            <div class="card-actions">
            Form field<br>
            Button
            </div>
        </div>

I want it to slide as normal but fade in the div with the class card-actions for each slide when it is the active slide and then when you start to slide to next slide i want it to fade out. Anyone have any idea how to do this?

回答1:

You need to use callbacks for that, for example (jQuery should be included):

var swiper = new Swiper('.swiper-container', {
  onSlideChangeEnd: function (swiper) {
    $('.swiper-slide').each(function () {
        if ($(this).index() === swiper.activeIndex) {
            // Fadein in active slide
            $(this).find('.card-actions').fadeIn(300);
        }
        else {
            // Fadeout in inactive slides
            $(this).find('.card-actions').fadeOut(300);   
        }
    });
  }
});