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', }, });