使用swiper 轮播插件ajax 请求加载图片时,无法滑动
2017-11-27 15:23
836 查看
因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度,通过调整js加载顺序,问题还是没有解决。最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})
转:https://www.cnblogs.com/demoworld/p/5977799.html
如果遇到滑动时把第一张隔过去了,可以把初始化写在ajax成功回调中。
2.在动态获取数据后马上对swiper进行初始化
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})
转:https://www.cnblogs.com/demoworld/p/5977799.html
如果遇到滑动时把第一张隔过去了,可以把初始化写在ajax成功回调中。
2.在动态获取数据后马上对swiper进行初始化
$.ajax({ type:"get", url:finalUrl, dataType:"json", success:function(data){ $("#reportList").empty(); for(var i=0;i<reportLength;i++){ var url="'"+"reportDetial.html"+location.search+"¬iceId="+reportList[i].id+"'"; reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">' +'<div class="item-title">'+data.resp[i].title+'</div>' +'<div class="item-content">'+data.resp[i].content+'</div>' +'<div class="item-date">'+data.resp[i].createTime+'</div>' +'</div>'; } $("#reportList").append(reportHtml); var swiper = new Swiper('.swiper-container', { slidesPerView : 3,
。。。。。。。 }); } });
相关文章推荐
- 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题
- 解决tmpl插件与图片自动轮播插件结合使用,无法加载mytv()方法问题
- 五滴水:使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- 使用 aui 自带的图片轮播图,AJAX异步调用数据给它无法轮播问题
- Swiper 通过ajax加载图片轮播后,导航点失效问题处理。
- 关于使用图片轮播插件无法实现效果的问题
- angular4 中使用swiper,开启loop后首次加载页面,轮播一次性跳过多张图片
- PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
- 关于使用图片轮播插件无法实现效果的问题
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 按需加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 使用jquery插件实现图片延迟加载技术
- 横向图片轮播(如果一个项目里面只需用这一次,可以用这个插件,多次则不建议使用)
- Android之ListView优化(使用Lrucache,图片滑动时使用默认图片,停止时加载)
- 使用jquery的lazy loader插件实现图片的延迟加载
- Android之ListView优化(使用Lrucache,图片滑动时使用默认图片,停止时加载)
- Lazy Load 延迟加载图片的jQuery插件中文使用文档
- Flex使用ant编译的时候无法加载css样式表中的图片解决方法
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解