iDangerous Swiper插件在活动幻灯片上淡入div，在滑动时淡出 [英] iDangerous Swiper plugin fade div on active slide and fade out on swipe

问题描述

我正在尝试设置滑动器，以使其在每张幻灯片的div中消失.

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

幻灯片看起来像这样

<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>

我希望它像往常一样滑动，但是当它是活动幻灯片时，随着每个幻灯片的类卡片动作在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?

推荐答案

例如，您需要使用回调(应包括jQuery):

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

这篇关于iDangerous Swiper插件在活动幻灯片上淡入div，在滑动时淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！