豪翔天下

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto', // 每一页的slide数量自动确定,这样可以做到不用整数个显示,也不会导致左右空白
spaceBetween: 10, // 每两个slide之间的间隔
centeredSlides: false, // 不用从居中开始,否则左边是空白的
pagination: {
el: '.swiper-pagination', // 分页元素位置
clickable: true,
},
direction: 'vertical', // horizontal滚动方向
width: 500, // 设置slide的高度和宽度,单位职能是px
height: 500,
breakpoints: { // 可以自定义不同的breakpoints里面的不同参数
1280: { // 屏幕宽度>=1280时候的breakpoings
width: 1000,
height: 1000,
direction: 'vertical', // 任何参数都可以breakpoint
}
}
scrollbar: {
el: '.swiper-scrollbar', // scrollbar的位置
clickable: true,
hide: true
},
navigation: { // 指定翻页按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: { // 使用对应的事件
afterInit: function () {}
activeIndexChange: function () {}, // 这个事件触发时active图片还没改变
slideChange: function() {}, // 这个事件触发时图片就改变了
slideChangeTransitionEnd: function() {}, // 感觉这个方法才是真正的改变完成了
}
});
  • 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
坚持原创技术分享,谢谢支持

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