[HTML/SCSS] Swiper 하나에 여러 pagination(fraction+progressbar) 커스텀 적용하는 방법

이전에 Slick 슬라이더로

https://selinak.tistory.com/74

[javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation

다양한 Pagination을 만든 적이 있습니다.

 

이번엔 더 활용도가 높은 Swiper에서 다양한 Pagination을 만들어보겠습니다.

Swiper는 기본 API와 CSS만으로 충분히 원하는 시안을 구현할 수 있을만큼 편리합니다.

하지만 위 이미지와 같이 pagination을 fraction과 progressbar의 결합된 형태로 만드는 것은 커스텀이 필요합니다. 

 

---

Swiper의 기본 기능인 Pagination의 타입은 크게 네 가지로 나눠집니다.

디폴트 값인 "bullets"

그리고

"fraction": 분수 형태(숫자)로 슬라이드 진행 상태 표시

 

 

"progressbar": 가로 막대로 슬라이드 진행율 표시 

 

 

마지막으로 "custom"이 있는데요~

custom 타입으로 지정하는 경우엔 renderCustom을 통해 렌더링을 해줘야 합니다.

 

This parameter is required for 'custom' pagination type where you have to specify how it should be rendered.

const swiper = new Swiper('.swiper', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});

 

 

Swiper 하나에는 기본적으로 하나의 pagination만 사용할 수 있습니다.

숫자와 프로그레스바를 같이 쓰려면?

별개의 swiper 변수를 만들어 추가로 연결하는 방법도 있지만 저는 renderCustom으로 한방에 해결하고자 합니다.

 

먼저 swiper div 안에 페이지네이션을 커스텀으로 넣을 태그를 만듭니다.

나는 custom-pagination이라 이름 지었다.

 

그다음에는 스크립트에 Swiper를 실행할 함수를 만들고 페이지네이션을 추가해 줍니다.

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

 

renderCustom을 추가하지 않으면 당연히 커스텀 페이지네이션이 나타나지 않습니다.

 

먼저 프로그레스바를 채우기 위해 변수를 정의해 줍니다.

renderCustom: function (swiper, current, total) {
	const fillPer = (current / total) * 100; //현재 슬라이드 백분율
	const fillWidth = fillPer + '%;'; //progess__fill의 너비 => 현재 슬라이드 백분율%
            },

 

전체 3개의 슬라이드 중 현재 2번째 슬라이드인 상태라면 2 / 3이니까 슬라이드 진행율이 66.66666%라고 볼 수 있겠죠?

 

다음은 이 진행율을 프로그레스바에 나타내기 위한 마크업 작업입니다.

반환(return)할 코드를 ' '안에 작성해 줍니다.

renderCustom: function (swiper, current, total) {
                const fillPer = (current / total) * 100;
                const fillWidth = fillPer + '%;';
                return '<strong>0<span class="current">' + current + '</span></strong><div class="progress__bar"><span class="progress__fill" style="width:' + fillWidth + '"></span></div><span>0' + total + '</span>';
            },
      },

 

 

renderCustom: function (swiper, current, total)

의 current와 total을 쉽게 갖다 쓸 수 있습니다.

얘네는 문자가 아니기 때문에 마크업 사이에 +로 이어줘야 합니다.

클래스명은 return의 홑따옴표 ''와 구분하기 위해 큰따옴표 ""로 써줍니다.

 

 

차곡차곡 나눠서 살펴봅시다.

'<strong>0<span class="current">' + current + '</span></strong>

👉🏻'<strong>0<span class="current">1</span></strong>

 

<div class="progress__bar"><span class="progress__fill" style="width:' + fillWidth + '"></span></div>

👉🏻<div class="progress__bar"><span class="progress__fill" style="width:진행율%"></span></div>

 

<span>0' + total + '</span>'

👉🏻<span>04</span>'

 

이게 다 합쳐져

return '<strong>0<span class="current">1</span></strong><div class="progress__bar"><span class="progress__fill" style="width:25%"></span></div><span>04</span>'

와 같이 렌더링이 됩니다.

 

progressbar에 CSS까지 입혀주면

  .progress__bar {
    position:relative;
    width:80%;
    height:10px;
    margin:0 20px;
    background-color:#fff;
    .progress__fill {
      position:absolute;
      inset:0;
      display:block;
      height: 100%;
      background-color: gold;
    }
  }

 

원하는 대로 작동을 합니다.

 

 

 

 

See the Pen Swiper multiple pagination at once - renderCustom by sel (@wimmwell) on CodePen.

 

728x90