スワイパースライダーと視差スクロール

Question

Swiper SliderとSimple Parallax Scrollingに問題があります。スライドを変更すると、常に同じ画像が表示されます。

私はそれが視差（固定）の画像の位置だと思います。

.swiper-slide-activeにZインデックスを追加しようとしましたが、役に立たなかった。

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

シンプルな視差スクロールでは、imageで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を使用してそれらを追加することができます。