快速学会使用Swiper.js，实现轮播图各种效果！

轮播图可以说是任何一个网站必不可缺少的一个特效，99.9999%的网站都有，没有人反驳吧。

到底如何用，很多人尤其是新手经常有这样那样的问题，图片不滚动？pc和手机不兼容，图片显示不全？一个页面多个轮播冲突？轮播图上显示文字？

等等各种各样的问题，要解决这样的问题，一般的技术人员收你300-500 元都是很正常的。

来吧，看看我整理的，让你不求人，自己搞，好像断了部分人的财路，哈哈！

1. 首先引入在线cdn的css和js插件    （具体版本可以官方使用最新的）

   
   <ｓｃｒｉｐｔ src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/js/swiper.min.js">

2. 根据需要复制html代码

这个是最基础的结构

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是出现时间
     /*

根据具体功能复制参数，修改参数即可，很快就能实现自己的banner插件了