swiper-動態更改數據后輪播點擊或拖動失效


出現的問題:

1、swiper不能自動切換(設置了autoplay)。

2、數據不匹配(需要加載的數據以改變,但是swiper里面的數據出現錯誤)。

3、數據匹配過后,永遠切換不到第一條數據。

4、根本不能切換,手動拉也拉不動。

總之遇到了很多從來沒有遇到的問題!!!問題所在就是沒有真正的了解swiper提供的方法,最后根據自己需求,靜下心來去看了swiper官網的方法使用,問題解決的差不多了。

 

真正的核心部分在

observer:true,//修改swiper自己或子元素時,自動初始化swiper 
observeParents:false,//修改swiper的父元素時,自動初始化swiper 
onSlideChangeEnd: function(swiper){ 
   swiper.update();  
   mySwiper.startAutoplay();
     mySwiper.reLoop();  
}

 

加上這串代碼后,使用基本正常

mySwiper.reLoop(); 重新對需要循環的slide個數進行計算,當你改變了slidesPerView參數時需要用到,需要自動輪播的時候必須要加上;

swiper.update();  更新Swiper,這個方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是數據改變是重新初始化一次swiper;

mySwiper.startAutoplay(); 重新開始自動切換;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM