轮播插件 swiper 的配置

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
            }
        }
    }
}