swiper设置循环播放;swiper设置loop循环无效

1、打开html开发工具，新建一个html代码页面

2、在新建的html页面上创建轮播的标签（可以直接复制以下代码）

代码：

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide">slider1</div>

    <div class="swiper-slide">slider2</div>

    <div class="swiper-slide">slider3</div>

  </div>

</div>

3、引入下载好的swiper.css文件，在title标签后面直接引入下载好的swiper标签。

4、设置轮播标签样式。（为了更加直观看到轮播效果，在这里给轮播标签里的类设置一些养基本样式）

样式代码：

.swiper-container{

width:500px;

margin:20px auto;

}

.swiper-container .swiper-slide{

height:400px;

line-height: 400px;

text-align: center;

width:100%;

background-color:#ddd;

}

5、引入下载好的swiper库。在body结束标签前使用script引入swiper.js文件。

6、创建轮播代码。在引入swiper.js文件后面创建一个script标签，然后在该标签里面使用new Swiper(".swiper-container",{autoplay:true})设置自动播放

代码：

var mySwiper  = new Swiper(".swiper-container",{

autoplay:true//设置自动循环播放

})

7、保存html代码后使用浏览器打开，这个时候就会看到轮播效果已经实现