반응형

 

 

Swiper

The Most Modern Mobile Touch Slider

 

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

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

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

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

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

이를 해결하기 위한 Swiper API 에 방법에 대하여 포스팅하겠습니다.

 

 

 

 

 

Pagination 정의

 

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

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

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

 

 

 

 

 

Swiper API : Pagination

 

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

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

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

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

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

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

 

 

Pagination Type

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

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

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

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

 

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

 

'pagination type' : bullets 문법 코드 입니다.
var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets'
	}
});

 

'pagination type' : progressbar 문법 코드 입니다.
var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_progress",   //페이징 태그 클래스 설정 
		type : 'progressbar'
	}
});

 

'pagination type' : fraction 문법 코드 입니다.
var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_fraction",   //페이징 태그 클래스 설정 
		type : 'fraction'
	}
});

 

'pagination type' : custom 문법 코드 입니다.
var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets',
		// Bullet Numbering 설정
		renderBullet: function (index, className) {
			return '<span class="' + className + '">' + (index + 1) + "</span>";
		},
	}
});

 

 

 

 

 

해결 방법

 

위에 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;

 

  Swiper - '페이징(pagination) 2개 연동 제어' 예제 실습 파일  

swiper-pagination.zip
0.03MB

 

 

 

 

 

마치며..

 

웹퍼블리싱 프로젝트를 하다 보면 고객사 또는 디자이너의 요청으로, Swiper 기본 옵션으로 구현하기 힘든 경우가 종종 발생합니다.

이럴 경우 당황하지 마시고, Swiper API를 응용하고 병행하여 사용한다면 대부분 요청사항은 해결할 수 있는 문제들입니다.

이번 포스팅 주제인  '한 개의  Swiper에 두 개의 페이징(pagination) 연결 제어' 또한 결국은 Swiper API controller 이용하여 문제 해결방법을 찾아냈습니다.

사실 cotroller는 이전에도 한 번 포스팅했었고,이번 포스팅 내용은 Swiper API를 응용에 대해 보여드리고 싶었습니다.

이 글을 보시는 웹퍼블리셔 분들도 Swiper API 대하여 다시 한번 고민하는 시간을 가졌으면 합니다.

감사합니다.

 

 

반응형

+ Recent posts