前言

项目需要根据轮播来改变对应背景和文字,所以需要获取当前轮播的下标。
轮播是 水平卡片式轮播,教程在前文 vue 水平卡片式轮播

loop 下 swiper6 获取当前轮播下标

获取下标方式: this.activeIndex % length
// 当前下标除以数组长度取余

代码示例:

new Swiper(".swiper3", {
direction: "horizontal", //滑动方向,可设置水平(horizontal)或垂直(vertical)。
loop: true, // 设置为true 则开启loop模式
slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto
centeredSlides: true, // 设定为true时,active slide会居中,而不是默认状态下的居左。
spaceBetween: 20, // 在slide之间设置距离(单位px)。
autoplay: {
// 设置为false,用户操作swiper之后自动切换不会停止
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
// eslint-disable-next-line space-before-function-paren
slideChangeTransitionStart: function () {
state.swiperIndex = this.activeIndex % state.swiperList.length;
},
},
});