Swiper slider and parallax scrolling

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> <div> <div> </div> <div> </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?

1 Answer

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.