CODEWITHSUNDEEP
jqueryswiper.js
Aaron
Aaron

Reputation: 545

iDangerous Swiper plugin fade div on active slide and fade out on swipe

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?

Upvotes: 1

Views: 6179

Answers (2)

Samiullah Khan
Samiullah Khan

Reputation: 894

Why don't you modify the Swiper Effect Parameter to fade as effect:fade. For more options visit their Api Documentation.

Upvotes: 0

Vladimir Kharlampidi
Vladimir Kharlampidi

Reputation: 9857

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);   
        }
    });
  }
});

Upvotes: 1

Related Questions