溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
bug描述：我在anjularjs 中使用了swiper輪播圖，通過動態獲取到數據插入swiper-slide中，我在swiper初始化中設置了loop(循環),但是在出現了一點小問題，swiper會失效，劃不動，當我設置固定的數據通過ng-src 插入到swiper-silde中，會正常輪播，但是第一張圖會出現空白。通過查詢了資料，發現swiper和angularjs執行的機制是不同的，swiper的機制是：初始化的時候自動掃描swiper-wrapper類下有多少個swiper-slide類塊，則允許滑動多少個塊。 而在angular始終在swiper初始化之后定義，swiper則無法正確scan有多少個slide（實際上找到一個待循環模板），所以劃不動。
我在網上搜了一點資料很多人都是通過添加兩個屬性就解決了，但我的還是不行，以下為插入的屬性。
observer:true,//修改swiper自己或子元素時，自動初始化swiper observeParents:true,//修改swiper的父元素時，自動初始化swiper12
我通過在link中初始化swiper中添加延時計時器，可以解決，盡管我延遲的時間設置為0,但是正常的效果出現了，我也不知道什么問題，如果有人知道可以解答一下。
以下為我的代碼,html代碼如下
<div class="swiper-slide" ng-repeat="item in arr">
<img ng-src="img/{{item}}" alt="" />
</div>
指令中的代碼如下
link:function(){
setTimeout(function(){
var swiper=new Swiper(".swiper3",{
pagination: '.swiper-pagination3',
paginationClickable: true,
centeredSlides: true,
autoplay: 2000,
loop : true,
autoplayDisableOnInteraction: false,
});
},0);
}
以上這篇swiper在angularjs中使用循環輪播失效的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
