动态加载swiper,默认显示最后一个swiper-slide怎么办

原文：https://segmentfault.com/q/1010000008933430/a-1020000009045910

 

我的swiper属性设置如下：

     var swiper = new Swiper('.images_div', {
         initialSlide :0,
         slidesPerView:'auto',
         spaceBetween: 10, 
         observer: true, //修改swiper自己或子元素时，自动初始化swiper
         observeParents: true //修改swiper的父元素时，自动初始化swiper
    });

用ajax动态加载swiper-slide以后，由于我是自适应屏幕的尺寸来决定一屏显示多少图片，所以加了 slidesPerView:'auto'这条属性，加了这条属性过后，每次刷新页面的时候他总是跑到最后一张，设置initialSlide :0也不管用，求大神解决！

• 关注 | 12
• 收藏
•  评论 · 3
• 邀请回答
• 编辑

the_only_ヾ  13

2017-04-03 提问

查看全部 10 个回答

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问

你看能否这样子，改个顺序，试试动态加载完html后，再去初始化new swiper呢

•  评论
• 赞赏
• 编辑

小神游  714

2017-04-13 回答

推荐答案

答案对人有帮助，有参考价值1答案没帮助，是错误的答案，答非所问

待swiper插件初始化完毕后动态修改最外层的swiper-wrapper的css属性transform，因为该插件就是通过改变该属性切换显示slide的。如图

设置延时函数（这是vue的写法，我的页面有两个swiper）是为了确保swiper初始完，不加不得。我也是在网上一直没找到解决方法，自己尝试了很久解决的。