Swiper滑塊和視差滾動

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。

您可以創建一個功能：

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