Swiper 버전 8.4.5
// swiper loop모드에서 activeIndex 찾기 함수 (인덱스 0부터 시작)
function geSlideDataIndex(swipe) {
let activeIndex = swipe.activeIndex;
let slidesLen = swipe.slides.length;
if(swipe.params.loop){
switch(swipe.activeIndex){
case 0:
activeIndex = slidesLen-3;
break;
case slidesLen-1:
activeIndex = 0;
break;
default:
--activeIndex;
}
}
return activeIndex;
}
// swiper
const slider = function (elem, pagi) {
const swiper1 = new Swiper(elem, {
loop: true,
// 생략
on: {
init: function () {
$('.button-wrap .slide-state').addClass('animate');
$('.button-wrap .total').text(`0${this.slides.length - 2}`);
},
beforeTransitionStart: function () {
$('.button-wrap .slide-state').removeClass('animate');
// ❌ loop모드에서 activeIndex 정상적으로 안나옴
// $('.button-wrap .current').text(`0${this.activeIndex}`);
// ⭕ loop모드에서 activeIndex 찾기 함수로 만든 결과를 사용
const activeIndex = geSlideDataIndex(this);
$('.button-wrap .current').text(`0${activeIndex+1}`);
},
slideChangeTransitionEnd: function() {
$('.button-wrap .slide-state').addClass('animate');
},
},
});
}
slider('.section1 .swiper','.section1 .swiper .swiper-pagination');
잘 읽었습니다 Docs를 찾아보니 realIndex를 사용하면 더 쉽게 구현 가능하더라고요