一、問題描述
在開發一個Jquery項目時，用到了Swiper插件，並且因爲要求數據的動態性，所以swiper-wrapper裏面的swiper-silde都是由Jquery動態渲染出來的DOM，結構如圖所示
二、問題分析
在使用上圖結構時，添加靜態數據可以使用Swiper的所有功能，但在動態的向swiper-wrapper中添加swiper-slide時，Swiper的自動輪播和左右滑動功能就會失效。也就是說Swiper不能用了。
後來看了下官網文檔然後認真理了下項目的思路，發現應該是同步異步的原因所導致，在項目初始化時，Swiper會自動的掃描swiper-wrapper下的swiper-slide的個數，然後根據這個在初始化的Swiper。但是在這個時候因爲Ajax是一個異步請求，所以很有可能這個時候Ajax的請求還沒有完全的完成。所以導致了swiper-wrapper裏面的內容是空的，這也就是導致Swiper失效的直接原因。
三、解決方案
解決方案分爲兩種：
- 把Swiper的初始化直接放到Ajax請求的成功回調裏面
- 在初始化Swiper的時候在裏面加上它的兩個屬性
observer: true, //修改swiper自己或子元素時，自動初始化swiper
observeParents: true //修改swiper的父元素時，自動初始化swiper