Este es el más utilizado en el proyecto H5. Me olvidé de reutilizarlo recientemente, pero todavía lo escribo para ver los conceptos básicos y ayudar a otros.
Parte HTML
Esta es la gramática de pug. Si no escribe el nombre de la etiqueta, el valor predeterminado es div, que también es fácil de entender, dependiendo principalmente de la relación jerárquica. Si necesita un buscapersonas, debe escribir uno <div class=".swiper-pagination ">y la página siguiente es la misma.
.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 //上一页
Parte 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',
},
});
Acerca de los recursos estáticos
Necesita dos archivos, uno es swiper.min.css, otro swiper.min.js. Recomendaciones al sitio web oficial para descargarlos y ponerlos en su propio servidor cdn. No diré cómo presentarlo.
Imagen de arriba
El valor predeterminado es cambiar de izquierda a derecha, especialmente cortado en configuración vertical. Encontrado para ser bonito
