Swiper（一）：解决swiper动态加载下一页衍生的问题

swiper插件好用不假，但真正项目中的轮播图是不可能一直用静态数据的，当我们用动态数据渲染轮播图的每一页时，如果调轮播的方法放的位置不对，轮播图就会出现不能滑动的问题，解决方法，看下面例子：

$.ajax({
                type: "POST",
                url: XXX, //接口地址
                data: {
					pageSize:"10",
					pageIndex:"1"
                },
                success: function (data) {
                	$(".swiper-wrapper").empty();
                	
                	$.each(data.list, function(index,obj) {
                		var swiper_wrapper_html = `<div class="swiper-slide"><div class="mid">${obj.title}</div></div>`;
                		$(".swiper-wrapper").append(swiper_wrapper_html);
                	});
                	
                	//重点是要等上面的数据渲染完，再执行swiper的方法，这样轮播图就可以自由滑动了
				    var swiper = new Swiper('.swiper-container', {
				        pagination: '.swiper-pagination',
				        slidesPerView: 'auto',
				        //initialSlide: "0",//设置轮播图默认当前页是第几页
				        centeredSlides: true,
				        paginationClickable: true
				    });
                	
    			}
    		});

轮播图虽然能滑动了，但是还有个问题，当我ajax请求下一页的数据时，突然发现控制台代码里每次在滑动轮播图时，图片虽然是动了，但是轮播图的"swiper-slide-active"类名不会像请求第一页数据时一样，会自动跳到我们所滑动到的当前页对应的div位置

一开始以为问题不大，后来问题就出现了，假如我第一页请求数据渲染轮播图的页数是10页，第二页请求回来的数据只有3页，这时轮播图的渲染是没问题的，但是我在滑动那三页的图片时，滑到最后一页，虽然后面没图片了，但是整个轮播图还是能一直划。

简单来说就是父元素的宽度还是记录成10页加起来的宽度，其实应该是3页的宽度才正确，不能理解我说啥的朋友，总之记着这样就是有问题，本人比较啰嗦请谅解。后来查了一下，发现解决方法也很简单。只需在调swiper的时候再传两个参数：

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

observeParents: true,//修改swiper的父元素时，自动初始化swiper

这样子，问题就都解决啦！