Swiper组件库居中左右留白问题

引入swiper组件库点击第一个或者最后一个居中左右留白的问题。

var mySwiper = new Swiper('.swiper-container2', {
        slideToClickedSlide: true, //开启点谁谁居中
        centeredSlides: true, //  居中
        slidesPerView: 5, //一行显示5个
        on: {
            init() {
                // 初始化设置为第一个
                this.setTranslate(0)
            },
            transitionStart() {
                // 如果是第一张或者第二张就不居中
                if (this.activeIndex == 0 || this.activeIndex == 1) {
                    this.setTranslate(0)
                }
                // 最后一张或者两张不动
                if (this.activeIndex == this.slides.length - 2 || this.activeIndex == this.slides.length - 1) {
                    let slideW = (this.width / 5).toFixed(5) //每个轮播的宽度
                    let keepW = slideW * (this.slides.length - 5) //需要设置的setTranslate的宽度
                    this.setTranslate(-keepW)
                }
            }
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

 

posted @ 2022-04-29 10:38  吃惊夜夜  阅读(324)  评论(0编辑  收藏  举报