滑动滑块和视差滚动

Question

我有一个问题 Swiper Slider and 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

Simple Parallax Scrolling 创建一个 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 slider and parallax scrolling

jquery

css

parallax

swiper