jquery - iDangerous Swiper 插件在活动幻灯片上淡出 div 并在滑动时淡出

Question

我正在尝试设置 swiper 以便它在每张幻灯片上淡入一个 div 。

幻灯片看起来像这样

<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，然后当你开始滑动到下一张幻灯片时，我希望它淡出。任何人都知道如何做到这一点？

Answer 1

您需要为此使用回调，例如（应包括 jQuery）：

var swiper = new Swiper('.swiper-container', {
  onSlideChangeEnd: 函数 (swiper) {
    $('.swiper-slide').each(function () {
        if ($(this).index() === swiper.activeIndex) {
            // 淡入活动幻灯片
            $(this).find('.card-actions').fadeIn(300);
        }
        别的 {
            // 在非活动幻灯片中淡出
            $(this).find('.card-actions').fadeOut(300);   
        }
    });
  }
});

Answer 2

为什么不将 Swiper效果参数修改为淡入淡出为effect:fade. 有关更多选项，请访问他们的Api 文档。