swiper loop모드에서 activeIndex 찾기

lize·2023년 1월 30일
0

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');
profile
웹퍼블리셔

0개의 댓글