eyoucms模板网 轮播图可以说是任何一个网站必不可缺少的一个特效，99.9999%的网站都有，没有人反驳吧。
到底如何用，很多人尤其是新手经常有这样那样的问题，图片不滚动？pc和手机不兼容，图片显示不全？一个页面多个轮播冲突？轮播图上显示文字？
等等各种各样的问题，要解决这样的问题，一般的技术人员收你300-500 元都是很正常的。
来吧，看看我整理的，让你不求人，自己搞，好像断了部分人的财路，哈哈！
首先引入在线cdn的css和js插件 （具体版本可以官方使用最新的）
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/css/swiper.min.css" rel="stylesheet">
<ｓｃｒｉｐｔ src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/js/swiper.min.js"></ｓｃｒｉｐｔ>根据需要复制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插件了
相关文章