豪翔天下

Change My World by Program

0%

Swiper 插件使用

官方文档

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto', // 每一页的slide数量自动确定,这样可以做到不用整数个显示
spaceBetween: 10, // 每两个slide之间的间隔
centeredSlides: false, // 不用从居中开始,否则左边是空白的
pagination: {
el: '.swiper-pagination', // 分页元素位置
clickable: true,
},
scrollbar: {
el: '.swiper-scrollbar', // scrollbar的位置
clickable: true,
hide: true
},
navigation: { // 指定翻页按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
  • Lazy Load Images:
1
2
3
4
5
6
var swiper = new Swiper('.swiper-container', {
lazy: true,
lazy: {
preloaderClass: 'my-preloader' // 默认lazy=true即可,但如果需要自定义preloader类名需要这样做
}
})
Troubleshooting
坚持原创技术分享,谢谢支持

欢迎关注我的其它发布渠道