动态加载swiper轮滑组件导致排版错误问题

来源:互联网 发布:生物帮软件下载 编辑:程序博客网 时间:2024/04/30 14:56

1.对于动态界面中的swiper轮滑组件js加载,对于loop为false的情况下一般在swiper初始化时加上两句属性代码即可

        observer:true,        observeParents:true,

2.对于loop=true的轮滑情况,就需要在每次动态加载时,都进行初始化

$(function(){    for(var i=0;i<6;i++){    $(".swiper-container1 .swiper-wrapper").append(    '<div class="swiper-slide">'+            '<img src="img/qie_index'+i+'.png" class="top-img top-img'+i+'">'+            '</div>'        );    var swiper1 = new Swiper('.swiper-container1', {        pagination: '.swiper-pagination1',        slidesPerView: 1,        paginationClickable: true,        loop:true,        spaceBetween: 0,        observer:true,        observeParents:true,        onSlideChangeEnd: function(swiper){         swiper.update(); //swiper更新    }     });}}

那么问题解决啦。


原创粉丝点击