Swiper动态渲染后轮播图划不动无法自动轮播解决方案

项目场景：

通过Ajax获取本地JSON数据进行swiper插件轮播图动态渲染页面时所产生的无法轮播问题。

问题描述

在制作一个轮播图时，用到了Swiper插件，并且因为要求Ajax使用JSON数据渲染成动态，所以swiper-wrapper里面的swiper-silde都是动态渲染出来的DOM，结构如图所示。

原因分析：

在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能会失效，和静态页面相同。
通过查阅网上资料和相似问题，发现是同步异步的原因所导致，Ajax请求默认为异步（true）在Ajax请求还未完成时 swiper的代码就已经运行，然而这时候由于页面中动态内容还未渲染上去，所以导致效果未添加导致无法轮播。

 xhr.open("get", "./js/index.json", false);//同步请求

 xhr.open("get", "./js/index.json", false);//异步请求

解决方案：

如上方给出的方案，将请求的第三个参数改为false， 也就是同步请求。

如果还未解决还需检查其他地方：

observer: true, //修改swiper自己或子元素时，自动初始化。

swiper observeParents: true //修改swiper的父元素