[JavaScript] Swiper 페이징(pagination) 2개 사용하기

Lpla

2021. 10. 15. 23:15

1. 들어가며

오늘 동료 직원이 하나의 Swiper에 2개의 페이징을 사용할 수 있는지 질문했다.

구현하고자 하는 결과물은 아래와 같았다.

Page + (i)tion

API에 따라서 페이징(Paging) 혹은 페이지네이션(Pagination) 이라고 칭하는 이것은 요소의 개수를 나타내주는 UI를 말한다. (파기, 파지, 패지네이션이 아니다)

가장 흔한 페이징은 게시판의 하단에 있는 숫자들이다.

각설하고 Swiper의 페이징은 총 네 가지가 있다.

그리고 페이징에 포함되지 않지만 거의 같은 기능으로 Scrollbar가 있다.

Swiper 페이징은 다음 코드로 추가할 수 있지만 오직 하나의 타입 밖에 사용할 수 없다.

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

사실 이 질문에 대한 해답은 이전에 포스팅한 적이 있다.

Swiper 예제 - Swiper 2개 연동

웹사이트를 만들다보면 Swiper 2개를 연동해야 하는 상황이 발생할 수 있다. 여기서 말하는 연동이란, A 슬라이더를 여러 방법으로 동작할 때, B 스와이퍼도 움직이는 것을 말한다. 마찬가지로 B 슬

lpla.tistory.com

원리는 간단하다.

Swiper가 총 2개 필요한데 하나는 메인이 되는 Swiper로, 슬라이드와 페이징 하나(위 예제에서는 Fraction 혹은 Progressbar)를 실행하고

나머지 하나는 다른 페이징 형태 하나를 실행한다.

그리고 controller로 메인 Swiper가 서브 Swiper를 제어하도록 한다.