Question

我遇到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'
});

如何解决这个问题？

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

Answer 1

简单视差滚动创建一个div .parallax-mirror with image。

您可以创建一个功能：

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添加它们。

Swiper滑块和视差滚动

1 个答案: