swiper在angularjs中使用循环轮播失效的解决方法
更新时间：2018年09月27日 09:14:49 作者：Tim_zsd
今天小编就为大家分享一篇swiper在angularjs中使用循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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中使用循环轮播失效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇关于Angular6新特性之Angular Material，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
本篇文章主要介绍了Angular 如何使用第三方库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
今天小编就为大家分享一篇angularJS1 url中携带参数的获取方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
AngularJs Creating Services详解及示例代码
本文主要介绍AngularJs Creating Services的知识资料，这里整理了详细的资料及简单示例代码，有需要的小伙伴可以参考下2016-09-09
本篇文章主要介绍了angular第三方包开发整理(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要给大家介绍了关于Angular动画的2种方式以及添加购物车动画的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
angular6 Error:Debug Failure at typeToString解决分析
这篇文章主要为大家介绍了angular6 Error:Debug Failure at typeToString解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
ios设备中angularjs无法改变页面title的解决方法
今天小编就为大家分享一篇ios设备中angularjs无法改变页面title的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要讲解AngularJS Ajax的知识，这里提供详细资料及代码示例，帮助学习AngularJS的朋友,有需要的小伙伴可以参考下2016-08-08
这篇文章主要介绍了Angular4学习笔记之根模块与Ng模块，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论