swiper插件在移動端，多個swiper左右滑動時有空白的問題

之前在項目上用到了多個swiper、但是結構結構代碼css、以及js  幾乎一樣的
除了第一個swiper左右滑動有回彈、其他都沒有回彈、於是嘗試了各種方法都不行。

百思不得其解 ，最后在官網終於找到了解決方法、一下是代碼
HTML代碼

<nav>
    <div class="swiper-container" id="swiper">
        <ul class="swiper-wrapper tabTwo">
            <li class="swiper-slide curTwo active"><a href="javascript:void(0);">2019</a><p class="bord"></p></li>
            <li class="swiper-slide"><a href="javascript:void(0);">2018</a><p class="bord"></p></li>
            <li class="swiper-slide"><a href="javascript:void(0);">2017</a><p class="bord"></p></li>
            <li class="swiper-slide"><a href="javascript:void(0);">2016</a><p class="bord"></p></li>
        </ul>
    </div>
    <div class="shade"></div>
</nav>
<div class="month on">
    <div class="swiper-container">
        <ul class="swiper-wrapper tab">
            <li class="swiper-slide cur twoActive"><a href="javascript:void(0);">11</a></li>
            <li class="swiper-slide"><a href="javascript:void(0);">11</a></li>
            <li class="swiper-slide"><a href="javascript:void(0);">11</a></li>
            <li class="swiper-slide"><a href="javascript:void(0);">11</a></li>
        </ul>
    </div>
</div>

<div class="month">
    <div class="swiper-container">
        <ul class="swiper-wrapper tab">
            <li class="swiper-slide cur twoActive"><a href="javascript:void(0);">12</a></li>
            <li class="swiper-slide"><a href="javascript:void(0);">12</a></li>
            <li class="swiper-slide"><a href="javascript:void(0);">12</a></li>
            <li class="swiper-slide"><a href="javascript:void(0);">12</a></li>
        </ul>
    </div>
</div>

四五個swiper

接着JS代碼：var mySwiper = new Swiper('.swiper-container', {

    autoplay: false,//可選選項，自動滑動

 slidesPerView : "auto",
 observer:true,
 observeParents:true,
});
一段js代碼就可以控制全部的swiper了，因為結構什么的都一樣
只需要在原本的swioer，js代碼上加上 以下這兩句監聽swiper就行了
observer:true,
observeParents:true,