多組圖自動無限循環（swiper輪播）

前兩天的一個項目中遇到多組圖片無限輪播，當時采用了swiper 但是沒有解決讓它無限輪播。今天再次嘗試了一下發現是自己的樣式寫錯了。今天在這里寫一下，為了給自己一個警醒不要犯同樣的錯誤

首先先引入一下swiper的css文件和js文件

<link rel="stylesheet" type="text/css" href="../swiper-4.5.0/dist/css/swiper.min.css" />
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="../swiper-4.5.0/dist/js/swiper.min.js"></script>

之后再HTML中寫入輪播的

<div class="tupian swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo1.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo2.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo3.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo4.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo5.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo1.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo2.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tupianimg">
                            <img src="../img/img/lunbo3.png" />
                        </div>
                    </div>
                </div>
            </div>

css樣式

            .container {
                width: 100%;
            }
            .container .tupian {
                margin-top: 19px;
                height: 200px;
            }
            .swiper-container {
                width: 900px;
                margin: 0 auto;
                height: 200px;
            }
            .container .tupian .swiper-slide {
                width: 300px;
                height: 200px;
            }
            
            .container .tupian .tupianimg {
                width: 100%;
                height: 200px;
                position: relative;
            }
            
            .container .tupian .tupianimg img {
                width: 100%;
                height: 200px;
            }

script

        var swiper = new Swiper('.swiper-container', {         
     spaceBetween: 20,
      loop: true,
    slidesPerView: 'auto',
    loopedSlides: 5,
            autoplay: {
                delay: 1500,
                disableOnInteraction: false,
            },
        });

 

這樣就可以完成自動無限輪播