swiper轮播问题(改数据无法自动轮播、中间显示全部两边显示部分、多行多列)

问题一：轮播图内容为动态数据生成时轮播图无法自动轮播

在用Swiper遇到的问题，因此加深了对Swiper的掌握，分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助。
        首先，new Swiper的初始化最后放在DOM后边，即加载完<div class="swiper-container"></div>后立即初始化，如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化：如放在window.onload = function() {
...}中或$(document).ready(function () {...})中，如果是动态数据加载，应该放在接口取值生成DOM后马上初始化。

        下面是个两个问题
        其一：(使用Swiper轮播插件ajax请求加载图片时，无法滑动的问题)，最后找到swiper插件 api 有属性是可以根据内容变动，自动初始化插件的。

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

        项目中引用了vue，banner图是后台配置的，ajax请求后台接口数据后生成的，将var mySwiper = new Swiper(".swiper-container",{})放在了请求成功的代码块中，代码如下：

vm.swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable :true,
    centeredSlides: true,
    autoplay: 2000,
    autoplayDisableOnInteraction: false,
});

      但是轮播图页面刷新后不会自动播放，且小圆点分页器只显示1个，这个bug后来通过observer:true添加这个属性完美的解决了。原因是因为banner图是动态创建的，在插件开始初始化时，文档流中没用图片，所以没有创建相应宽度，通过调整js加载顺序，问题是解决不了的。

问题二：默认显示3张图片，中间显示全部两边显示部分

slidesPerView:一行能够同时显示的slides数量，设置 'auto'则自动根据slides的宽度来设定数量。

centeredSlides:设定为true时，active slide会居中，而不是默认状态下的居左

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay: 2000,
    slidesPerView: "auto",
    centeredSlides:true,
    spaceBetween: 20,
    // 如果需要分页器
    pagination: '.swiper-pagination',
 })

问题三：多行多列

slidesPerView:一行能够同时显示的slides数量，设置 'auto'则自动根据slides的宽度来设定数量。

slidesPerColumn:设置多行布局里面每列的slide数量。

slidesPerColumnFill:多行布局中以什么形式填充。

new Swiper("#icons-swiper", {
    //   autoplay: {
    //     delay: 2000, //1秒切换一次
    //   },
    slidesPerView: 4, // 一行展示几个
    slidesPerColumn: 2, //设置多行布局里面每列的slide数量
    slidesPerColumnFill: "row", //多行布局中以什么形式填充
    observer: true,
    observeSlideChildren: true,
});