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

Answer 2

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

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

2 个答案: