移动端轮播图，自动切换 - swiper插件

移动端轮播图使用的 swiper 插件，版本是 Swiper 4.5.0

首先引入 swiper.min.css 以及 swiper.min.js

在 html 中，搭好模板

<div class="swiper-container">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
             <img src="../../img/1.jpg" alt="" />
         </div>
         <div class="swiper-slide">
             <img src="../../img/2.jpg" alt="" />
         </div>
         <div class="swiper-slide">
             <img src="../../img/3.jpg" alt="" />
         </div>
     </div>
     <!-- 分页器 -->
     <div class="swiper-pagination"></div>
 </div>

在 js 中调用插件，并根据自己的需求进行自定义

/*轮播图*/
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay: {
        delay: 3000,//3秒切换一次
        disableOnInteraction: false
    },
    pagination: {
        el: '.swiper-pagination',
    }
})