bug】Swiper动态渲染swiper-slide后轮播图划不动解决方案

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyunkun888/article/details/83068497
一、问题描述
在开发一个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
 ———————————————— 
版权声明：本文为CSDN博主「不想写代码的码农」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liyunkun888/article/details/83068497