动态加载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也不管用,求大神解决!

2017-04-03 提问

查看全部 10 个回答

0

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

推荐答案

1

待swiper插件初始化完毕后动态修改最外层的swiper-wrapper的css属性transform,因为该插件就是通过改变该属性切换显示slide的。如图
clipboard.png
设置延时函数(这是vue的写法,我的页面有两个swiper)是为了确保swiper初始完,不加不得。我也是在网上一直没找到解决方法,自己尝试了很久解决的。
图片描述

posted @ 2019-10-18 13:15  鳳舞九天  阅读(1795)  评论(0编辑  收藏  举报