動態加載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初始完，不加不得。我也是在網上一直沒找到解決方法，自己嘗試了很久解決的。