多组图自动无限循环（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,

            },

        });

这样就可以完成自动无限轮播

巴特西

多组图自动无限循环（swiper轮播）

最新文章

热门文章