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

原创于 2019-05-05 17:07:11 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

4 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

博客介绍了移动端轮播图插件的使用。需先引入相关内容，在特定环境中搭好模板，然后调用插件并根据自身需求进行自定义。

移动端轮播图使用的 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',
    }
})