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 = `<p class="swiper-slide"><p class="mid">${obj.title}</p></p>`;  
                        $(".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"类名不会像请求第一页数据时一样，会自动跳到我们所滑动到的当前页对应的p位置

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

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

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

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

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