Swiper Fraction 페이지네이션에 0 붙이기

 

안녕하세요. 찐망고 입니다.

swiper의 pagination은 여러 가지로 커스텀할 수 있는데요.

오늘은 fraction타입으로 숫자에 "0"을 추가할 거예요.

 

물론 구글링 하면 많은데 이 포스팅은 최신버전!! 기준으로다...

swiper-pagination 타입: fraction

var swiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
});

 

기본적인 fraction은 현재 슬라이드 번호 / 전체 슬라이드 개수 형식으로 이루어진다.

숫자 10 미만으로 01,02 이런 식으로 넘버링이 붙으려면 따로 작업을 해줘야 하는데 

 

아래 코드를 확인해 보면 된다. 

var swiper = new Swiper(".mySwiper", {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
    // 페이지네이션을 커스텀할 수 있는 함수 (fraction 모양을 어떻게 보여줄지 정의)
    renderFraction: function (currentClass, totalClass) {
    	// 현재 슬라이드 번호와 총 슬라이드 번호를 HTML로 반환
        // currentClass와 totalClass는 각각 현재와 전체 슬라이드 번호를 표시할 곳에 추가할 클래스
        return `<span class="${currentClass}"></span> / <span class="${totalClass}"></span>`;
       
        // 위 코드와 동일한 기능을 하며, 아래와 같이 + 기호를 이용한 방식도 가능함.
        // return '<span class="' + currentClass + '"></span>' + ' / ' + '<span class"' + totalClass + '"></span>';
    	},
        // 현재 슬라이드 번호를 두 자리로 만들어주는 함수
        formatFractionCurrent: function (number) {
        	// 슬라이드 번호가 10보다 작으면 앞에 '0'을 붙여서 두 자리 숫자로 표시
            return number < 10 ? '0' + number : number;  // 현재 슬라이드 숫자에 0 추가
        },
         // 총 슬라이드 숫자를 두 자리로 만들어주는 함수
        formatFractionTotal: function (number) {
        	// 슬라이드 번호가 10보다 작으면 앞에 '0'을 붙여서 두 자리 숫자로 표시
            return number < 10 ? '0' + number : number;  // 총 슬라이드 숫자에 0 추가
        },
      },
  },
});

 

 

 

 

전체적인 슬라이드는 아래 예시에서 확인해 보세요.

 

See the Pen swiper fraction 숫자0넘버링 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.