swiper 的基本配置
以[email protected]为例,swiper 的基本配置如下:
let instance = new Swiper('.swiper-container', {
direction: 'vertical', // 设置slide的方向为竖直排列
slideActiveClass: 'active', // 活动块的className
slideNextClass: 'bandListItemActive', // 设置活动元素的下一个元素的className
slideDuplicateClass: 'my-slide-duplicate', // 循环模式下被复制的slide类名
autoplay: true, // 开启自动轮播,等同于以下设置
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false, // 在最后一个slide时,停止自动轮播
// disableOnInteraction: true, // 用户操作slide后,就停止自动播放
// },
noSwiping: true, // 禁止class为stop-swiping的slide
noSwipingClass: 'stop-swiping', // 为禁止的slide标记一个class名
// slideToClickedSlide: true, // 点击滑动到对应的slide
initialSlide: 0, // 设置初始活动块
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observerParents: true, // 修改swiper的父元素时,自动初始化swiper
loop: true, // 开启循环轮播模式
loopAdditionalSlides: 0, // 循环模式下复制的slide个数
slidesPerView: 7, // 容器中可见的slide个数
spaceBetween: '1%', // slide之间的间距
centeredSlides: true, // 活动块在容器中央显示
on: { // 事件监听 回调
click: function () {
console.log('触发click事件')
// instance.clickedSlide 获取到被点击的slide
console.log('instance.clickedSlide=', instance.clickedSlide)
// 跳转到指定索引的slide
instance.slideToLoop(index, 100, function () {
console.log('slideToLoop 回调')
})
// 滑至前一个slide,第一个参数为回调函数,true即slideChange..函数;第二个参数为时间
instance.slidePrev(true, 50)
instance.slideNext(true, 50) // 滑至后一个slide
},
// 在移动端,click 事件会有延迟甚至失效,用tap事件来替代
tap: function () {
console.log('触发tap事件')
},
// slide滑动会触发以下事件
slideChange: function (swiper) {
// this.activeIndex 当前活动块的索引
console.log('slideChanges事件 this.activeIndex=', this.activeIndex)
// this.activeIndex 当前活动块的真实索引(用于Loop模式下)
console.log('slideChanges事件 this.realIndex=', this.realIndex)
},
slideChangeTransitionStart: function () {
console.log('slideChangeTransitionStart事件')
},
slideChangeTransitionEnd: function (swiper) {
// 每次执行slideNext都会触发slideChangeTransitionEnd
// 循环执行slideNext 直至 nextTimes - 1 不大于 0
if (nextTimes - 1 > 0) {
nextTimes--
that.listSwiper.slideNext(true, timeLength)
return
}
}
}
}