还在全网搜各种轮播图插件效果？还在下载轮播图之后跳转样式？都2020年了，不嫌麻烦吗？swiper插件的出现，几乎快覆盖了整个前端市场了吧！简单，快速，来跟着我学，5分钟让你实现轮播效果，一个js代码不让你写...

1.首先引入在线cdn的css和js插件

<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/js/swiper.min.js"></script>

2.根据需要复制html代码

<div class="swiper-container">
<!--轮播内容-->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!--左右切换-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!--分页器-->
<div class="swiper-pagination"></div>
<!--滚动条-->
<div class="swiper-scrollbar"></div>
</div>

3.根据需要复制js代码，用什么复制什么

单个轮播

var swiper = new Swiper('.swiper .swiper-container', { });

多个轮播，用多少建多少，一定要区分开，否则轮播之间会有冲突

var swiper1 = new Swiper('.swiper1 .swiper-container', { });
var swiper2 = new Swiper('.swiper2 .swiper-container', { });
var swiper3 = new Swiper('.swiper3 .swiper-container', { });
....

功能参数：

var swiper = new Swiper('.swiper-container', {  ——请勿全部复制，根据需要添加子项
spaceBetween: 30, //slide之间距——间距30
slidesPerView: 'auto', //多列——宽度自动
slidesPerGroupSkip: 3, //设置 前n个不列入分组 ——前3个不列入分组，将单独出现
slidesPerView: 4, // 多列——一屏显示4列
centeredSlides: true, // 多列居中显示
slidesPerGroup: 3, //多列分组，一次滚动一组——分3组
freeMode: true, // 多列任意滚动
slidesPerColumn: 2, //多行 —— 一屏显示2行
loop: true, //开启循环滚动，从头尾相接
loopFillGroupWithBlank: true, //循环滚动相接处填充空白区分头尾
autoplay: { //自动切换
delay: 2500, //时延
disableOnInteraction: false,
},
lazy: true, //懒加载
direction:vertical, //滚动方向 vertical：垂直  horizontal：水平
autoHeight: true, //滚动高度自动
effect: 'fade', //切换效果-淡入淡出
effect: 'flip', //切换效果-翻转
effect: 'coverflow', //切换效果-歌曲封面效果
coverflowEffect: {  //歌曲封面效果设置
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true,
},
effect: 'cube', //3D立体切换效果
cubeEffect: { //3D立体切换效果设置
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
parallax: true,//开启视差滚动 ——以下为视差html设置，data-swiper-parallax是出现时间
/*<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
</div> */
grabCursor: true, //鼠标样式变抓手
keyboard: { enabled: true }, //键盘控制，上下左右
navigation: { //左右切换
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {  //根据屏幕调整参数，类似css媒体查询，可以是分辨率：320，也可以是点密度：@1.00
320: {  //当屏幕宽度大于等于320
slidesPerView: 2,
spaceBetween: 10
},
768: {  //当屏幕宽度大于等于768
slidesPerView: 3,
spaceBetween: 20
},
1280: {  //当屏幕宽度大于等于1280
slidesPerView: 4,
spaceBetween: 30
}
}
mousewheel: true, //鼠标滚动切换开启
pagination: { //分页器 ——请勿全部复制，根据需要添加子项
el: '.swiper-pagination'，//绑定分页元素
clickable: true,   //可点击，可拖拽切换
dynamicBullets: true, //分页器大小变化
type: 'progressbar', //进度条分页
type: 'fraction', //数字切换 1/10
renderBullet: function (index, className) { // 数字分页 1 2 3 ....
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
scrollbar: { // 滚动进度条 ，html需要有swiper-scrollbar元素
el: '.swiper-scrollbar',
hide: true,
},
...
});

根据具体功能复制参数，修改参数即可，很快就能实现自己的banner插件了，是不是再也不用手写js轮播图了？

官方文档：https://www.swiper.com.cn/api/start/new.html