Swiper 滑块和视差滚动答案

【问题标题】：Swiper slider and parallax scrollingSwiper 滑块和视差滚动
【发布时间】：2017-08-02 11:32:00
【问题描述】：

Swiper Slider 和 Simple Parallax Scrolling 有问题 - 当我更换幻灯片时，我总是看到相同的图像。

我猜是图片在视差中的位置（固定）。

我尝试为 .swiper-slide-active 添加 z-index，但没有帮助。

HTML：

<div class="top-slider swiper-container w-100 fl">
    <div class="swiper-wrapper">
        <div class="slide-item swiper-slide" data-parallax="scroll" data-image-src="img/top_slide_01.jpg">

        </div>
        <div class="slide-item swiper-slide" data-parallax="scroll" data-image-src="img/top_slide_02.jpg">

        </div>
    </div>
</div>

JS：

// Top slider
var topSlider = new Swiper('.top-slider', {
    loop: true,
    slidesPerView: 1,
    effect: 'fade'
});

如何处理这个问题？

可以使用其他方式进行视差滚动吗？

【问题讨论】：

标签： jquery css parallax swiper

【解决方案1】：

简单的视差滚动创建一个带有图像的 div .parallax-mirror。

你可以创建一个函数：

setZIndexForBgInTopSlider = function() {

    var activeSlideBgUrl = $('.swiper-slide-active').attr('data-image-src');
    $('.parallax-mirror').each(function() {
        if (activeSlideBgUrl == $(this).find('.parallax-slider').attr('src')) {
            $(this).css('z-index', 10);
        } else {
            $(this).css('z-index', -100);
        }
    });

};

并更新你的 js：

// Top slider
var topSlider = new Swiper('.top-slider', {
    loop: true,
    slidesPerView: 1,
    effect: 'fade',
    onInit: setZIndexForBgInTopSlider,
    onSlideChangeStart: setZIndexForBgInTopSlider
});

现在没有背景动画了，但是你可以用css来添加。

【讨论】：