Swiper slider and parallax scrolling

Question

I have a problem with Swiper Slider and Simple Parallax Scrolling - when I change slides, I see the same image all the time.

I guess it is the position of the picture in the parallax (fixed).

I tried to add a z-index for .swiper-slide-active but it did not help.

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

How to cope with this problem?

Can use some other way to parallax scrolling?

Unknown Unknown · Accepted Answer · 2017-08-02T21:58:10

Simple Parallax Scrolling creates a div .parallax-mirror with image.

You can create a function:

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

};

And update your js:

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

There is no background animation now, but you can add them using css.

Swiper slider and parallax scrolling

1 Answers