swiper jquery动态添加数据不滑动

最新推荐文章于 2025-02-04 07:46:25 发布

玩世不恭的刍狗

最新推荐文章于 2025-02-04 07:46:25 发布

阅读量1.5k

点赞数 1

文章标签： swiper jquery 不滑动 swiper不滑动前端

本文链接：https://blog.csdn.net/weixin_42248493/article/details/88643721

版权

这种数据写死的方式，swiper轮播都是没有问题的，但是实际项目中，一般banner数据都是动态从服务器请求的，

但是动态获取到banner之后，发现swiper不轮播，只显示一张静态图片：

用elements查看，其实多条banner数据已经存在了，后来想到应该是异步获取数据时候，swiper已经加载完了，

后来查看资料，“swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。
而数据在swiper初始化之后才异步请求到，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。”

我的解决办法是：

for (var i = 0; i < result.data.bannerImageList.length; i++) {
    html += '<div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" src="http://shop.emaidoctor.com' + result.data.bannerImageList[i].imagePath + '" \n' +
        '                                                                            alt=""></a></div>'
}

$(".swiper-wrapper").html(html);
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination', //分页器
    paginationClickable: true,
    autoplay: true,//自动播放
    speed: 3000,//轮播速度
    loop: true,//是否循环轮播

    <!-- 下面俩行代码就是解决异步加载数据导致swiper不轮播的关键 -->

    observer: true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents: true,//修改swiper的父元素时，自动初始化swiper
});