Swiper Pagination

Swiper

The Most Modern Mobile Touch Slider

 

웹퍼블리싱 프로젝트에서 슬라이더는 거의 빠지지 않고 들어가는 기능입니다.

Swiper 기본 라이브러리 옵션만 사용해서 구현 가능한 슬라이더를 만들 수 있는 프로젝트라면 괜찮지만, 

고객사의 요청으로 Swiper 기본 라이브러리 옵션으로 만들수 없는 슬라이더를 구현해야 하는 경우도 종종 발생합니다.

그럴 경우 매우 난감합니다.

예를 들어 한 개의 Swiper 슬라이더에 두 개의 Pagination(페이징)을 연동해서 제어해야 할 때가 있습니다

 

 

 

Pagination 정의

 

게시물의 양이 많을 경우 스크롤이 길어지고 서버로부터 읽어와야 하는 데이터의 양도 많아지게 됩니다.

따라서 페이지 로딩에 소요되는 시간이 늘어나게 되고, 페이지도 한눈에 보기 힘들어지게 됩니다.

이럴 경우 한 페이지에 사용자들이 보기 적당할 정도의 목록에 페이징을 적용하여 데이터를 보여주는 것을 페이징(pagination)이라 정의할 수 있습니다. 

 

 

 

 

 

Swiper API : Pagination

 

Swiper API의 Pagination은 목록 요소의 개수를 나타내 주는 UI 라고 말할 수 있습니다.

가장 일반적인 Swiper Pagination은 Swiper 요소의 하단의 숫자들입니다.

Swiper 라이브러리는, 공식적으로 한 개의 Swiper에서 Pagination은 오직 한 개의 옵션을 제공하며, 사용 가능합니다.

그렇기에 고객사의 요청에 의해 2개 이상의 Pagination Type 옵션을 사용해야 할 경우 pagination 기본 옵션만으로 구현이 불가능하며,

Swiper API 중에서 controller 를 활용하여 이 문제를 해결할 수 있습니다.

문제 해결 방안에 제시에 앞서  Swiper Pagination 명세서는 아래와 같습니다.

• ✔ Swiper API : paginaiton 명세서 : https://swiperjs.com/swiper-api#pagination

 

 

Pagination Type

Swiper Paginaiton은 총 네 가지의 종류입니다.

bullets, progressbar, fraction, custom 으로 구분할 수 있습니다.

위의 네 가지 Type 중에서 '두 가지 Pagination UI 기능을, 한 개의 Swiper 슬라이더에 적용하는 방법' 에 대하여 확인해 보겠습니다.

예제는 progressbar와 bullets에 숫자 custom을 적용을 예시로 포스팅하겠습니다.

 

각설하고 먼저 Pagination Type 네 가지에 대해 알아보겠습니다. 

 

'pagination type' : bullets 문법 코드 입니다.

✔ Swiper bullets Demo : https://swiperjs.com/demos#pagination

 

'pagination type' : progressbar 문법 코드 입니다.

✔ Swiper progressbar Demo : https://swiperjs.com/demos#pagination-progress

 

'pagination type' : fraction 문법 코드 입니다.

✔ Swiper fraction Demo : https://swiperjs.com/demos#pagination-fraction

 

'pagination type' : custom 문법 코드 입니다.

✔ Swiper custom Demo : https://swiperjs.com/demos#pagination-custom

 

 

 

 

 

해결 방법

 

위에 Swiper Type에 대하여 알아보았습니다.

그렇다면 'Swiper Type 두 종류를, 한 개의 Swiper에 사용할 수 있는 방법'에 대해 설명드리겠습니다.

한 개의 Swiper에 progressbar와 cumtom 페이징을 사용한다고 가정할 때, progess와 cumstom 중 하나를 한 개의 Swiper 슬라이더에서 실행하고,

나머지 하나는 다른 페이징 형태로 실행합니다.

그리고 Swiper API 중에서 controller로 메인 Swiper가 다른 형태의 Swiper 페이징 형태를 제어하도록 합니다.

이해를 돕기 위해, 스크립트 작성 코드 및 예제 다운로드 파일을 아래와 같이 제공합니다.

 

var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,   //슬라이드 간격
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		clickable: true,    //버튼 클릭 여부
		type : 'bullets',   //페이징 타입 설정(종류: bullets, fraction, progressbar)   
		// Bullet Numbering 설정
		renderBullet: function (index, className) {
			return '<span class="' + className + '">' + (index + 1) + "</span>";
		},
	},
});

//progress Bar
var pagingSwiper = new Swiper(".gallery-top", {
	pagination: {
		el: ".pagination_progress",
		type: "progressbar",
	},
});

//Main Swiper로 progress Bar 제어
galleryTop.controller.control = pagingSwiper;