这是H5项目用的最多的了,最近重新用上有些忘记,还是写出来方便查看基本的,也帮助其他人
HTML部分
这是pug的语法,不写标签名默认即div了,也很好看懂,主要是看层级关系。需要分页器,就要写上一个<div class=".swiper-pagination ">
即可 上下页同理。
.swiper-container //最外层
.swiper-wrapper //主要显示层
.swiper-slide //某页具体内容
img.imgCover(src="https://res.********/miaoBest_1.png")
.swiper-slide
img.imgCover(src="https://res.********/miaoBest_1.png")
.swiper-slide
img.imgCover(src="https://res.********/miaoBest_1.png")
.swiper-pagination //分页器
.swiper-button-next //下一页切换
.swiper-button-prev //上一页
JS部分
// 初始化swiper
swiper = new Swiper('.swiper', {
init: true, //初始化时候就开启 ,好像没声明用
centeredSlides: true, //没啥用
initialSlide: 1, //默认第一个显示哪个
slidesPerView: 'auto', //一页展示多少个,auto是根据页面宽度
loop: true, //循环
effect: 'coverflow',//翻页动画样式,有四种
coverflowEffect: { //coverflow动画详细配置
rotate: 0,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
direction: 'vertical', // 垂直切换选项
speed:300, //默认,切页动作花费的时间,
autoplay:true, //自动播放,5s一页
//开启分页、html也要写
pagination: {
el: '.swiper-pagination',
clickable :true, //点击圆点跳页
},
//指定组件
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
关于静态资源
需要引入两个文件,一个是swiper.min.css、另一个swiper.min.js.建议去官网下载好,放到自己的cdn服务器上。怎么引入就不说了。
上图
默认是左右切换、特地切成垂直来配置。发现还挺好看