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(实际上找到一个待循环模板),所以划不动。

我在网上搜了一点资料很多人都是通过添加两个属性就解决了,但我的还是不行,以下为插入的属性。

?


1

2

observer:true,//修改swiper自己或子元素时,自动初始化swiper

observeParents:true,//修改swiper的父元素时,自动初始化swiper12

我通过在link中初始化swiper中添加延时计时器,可以解决,尽管我延迟的时间设置为0,但是正常的效果出现了,我也不知道什么问题,如果有人知道可以解答一下。

以下为我的代码,html代码如下

?


1

2

3

<div class="swiper-slide" ng-repeat="item in arr">

 <img ng-src="img/{{item}}" alt="" />

</div>

指令中的代码如下

?


1

2

3

4

5

6

7

8

9

10

11

12

13

link:function(){

setTimeout(function(){

var swiper=new Swiper(".swiper3",{

pagination: ‘.swiper-pagination3‘,

paginationClickable: true,

centeredSlides: true,

autoplay: 2000,

loop : true,

autoplayDisableOnInteraction: false,

 });

},0);

}

原文地址:https://www.cnblogs.com/aillabig/p/9786067.html

时间: 2024-07-30 22:48:26

swiper在angularjs中使用循环轮播失效的解决方法的相关文章

swiper在vue项目中的循环轮播bug以及点击事件

一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. 解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false.这时候使用autoplay开启自动播放是可以的, 然而当加上loop让其循环播放时,会发现是有

vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)

方法一: 在项目中使用vue-awesome-swiper如果loop和autoplay总是出现各种问题,第一次加载的时候,轮播是不动的,需要重新加载一下swiper才会轮播 解决方案: //轮播设置 swiperOption: { direction: 'vertical', observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper loop:true, autopla

利用jQuery实现图片无限循环轮播(不借助于轮播插件)

原来我主要是用Bootstrap来实现轮播图的功能,而这次是用javaScript和jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要) 效果展示: html代码: <body> <div id="container"><!-- left:-600px 表示:页面加载出现的第一张图片是1.jp --> <div id="list" style="le

非常优秀的swiper插件————幻灯片播放、图片轮播

幻灯片播放.图片轮播----非常优秀的swiper插件 http://www.idangero.us/sliders/swiper/index.php    插件主页 http://www.idangero.us/sliders/swiper/api.php        插件API http://www.idangero.us/sliders/swiper/demos.php   插件DEMO <!DOCTYPE html> <html> <head> <met

非常简单的方法实现ViewPager自动循环轮播

非常简单的方法实现ViewPager自动循环轮播,见红色代码部分,其它的代码可以忽略不看. 简洁高效是我解决问题的首要出发点. package com.shuivy.happylendandreadbooks.fragment; import android.app.Activity; import android.app.Fragment; import android.os.Bundle; import android.os.Handler; import android.support.v

js 实现图片间隔循环轮播以及没有间隔的循环轮播

链接地址:http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html 最近做了个图片循环轮播的功能.就是几张图片不断的循环滚动显示. 感觉这个方法不错所以把实现过程记录下来: 图片间隔循环轮播: 1.html里面把要进行轮播的图片用一个容器包起来,用js来控制这个容器滚动,当然最外面的容器要设置overflow:hidden;. 2.css里面控制这个容器的位置,实现滚动就需要用到定位. 3.js里面利用jquery的animate动画函数实现滚动.

项目记录:spring+springmvc 项目中 @Transactional 失效的解决方法

第一步,修改spring的配置文件和springmvc的配置文件 --------------------------------applicationContext.xml <context:annotation-config/>  <context:component-scan base-package="com.xxx"> <context:exclude-filter type="annotation" expression=&

【原创】关于flexviewer中引入图表时报的TypeError #1009解决方法

在自定义的widget中引入图表后,运行时出现TypeError #1009错误.本人网上查找了很多资料,其中大部分都是关于Flash中的动画效果问题,与这里的问题关系型不太大.故把问题的解决方法写在这里,与人方便,与己方便. 方法一: 1.在自定义的widget中添加如下两个方法: private function copyStyleFromParent(selector:String):void { var chartBaseStyle:CSSStyleDeclaration = style

jquery-easyui的datagrid在checkbox多选时,行选中不对应,去除高亮的解决方法

jquery-easyui的datagrid在checkbox多选时,行选中不对应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不允许被选中行的需求. 如下图,点击"查看"时,只是为了查看详细信息,并不是需要选择行. 完成这个需求,其实只需要将datagrid的checkOnSelect属性设置为false就可以了. 然而,当设置该属性后,新的问题就随之出现了. 目前的办法是使用以下代码去除高亮:  (本来是打算处理成c