이번 포스팅에서는 제가 작성한 jQuery 애니메이션 슬라이더(Slider) 모듈인 “Epiloum Slider”를 소개합니다.

웹 상에서 찾을 수 있는 수많은 자바스크립트 또는 jQuery 슬라이더는 필요 이상의 복잡한 HTML 태그 구조를 요구하거나, 사전에 CSS 작업 상당 부분 필요한 경우가 많습니다. 이처럼 애니메이션이라는 UX적인 부분을 위해 마크업을 희생하는 것은 의미론적 마크업의 철학에 위배되는 것이기도 합니다.

Epiloum Slider는 그와 같은 상황에 대한 안타까움으로부터 만들어졌습니다. 본 모듈의 가장 큰 특징은 1개의 <ul> 또는 <ol> 태그와, 그 아래에 나열된 <li> 태그들 만으로 적용 가능하다는 점입니다. 또한 스크립트를 이용해 CSS를 변경하는 일을 최소화하여, 실무에서 응용할 때 레이아웃에 영향을 줄 가능성을 최소화하였습니다. 간결한 마크업를 추구하는 많은 분들께 도움이 되시기를 바라겠습니다.

 

파일구성

아래 버튼을 눌러 다운로드 받은 zip 파일의 압축을 해제하면, 2개의 디렉토리를 만날 수 있습니다. 첫 번째 디렉토리인 Module 아래에는 자바스크립트 파일 epiloum_slider.js이 들어있으며, 실제로 본 슬라이더를 사용할 때에 임베디드해야 하는 파일입니다. 두 번째 디렉토리인 Example 아래에는 본 모듈의 사용예제가 들어 있습니다.

 

슬라이더 사용예제

• 
• 
• 
• 
• 

◀▶ ①②③④⑤

총 5개의 <li> 요소를 가진 <ul> 요소에 슬라이더를 적용한 예제입니다. Epiloum Slider는 기본적으로 좌우로 수평이동을 하는 간결한 애니메이션을 보여줍니다. 좌우이동은 물론이요, n번째 슬라이드로 건너뛰어 이동하는 기능도 제공합니다.

 

슬라이더 생성방법

Epiloum Slider을 사용하기 위해서는 epiloum_slider.js 파일과 함께 jQuery 라이브러리를 임베디드해야 합니다. 본 모듈이 기초로 한 jQuery 버전은 1.12.3입니다.

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="epiloum_slider.js"></script>

본 모듈은 아래와 같이 1개의 <ul> 또는 <ol> 요소에 애니메이션이 가미된 슬라이더로 만들어줍니다. <ul> 또는 <ol> 요소 아래에는 여러 개의 <li>가 배치될 수 있으나, <li> 외의 다른 요소는 없어야 합니다. 또한 모든 <li> 요소의 너비는 같아야 합니다.

<ul id="slider">
	<li><img src="1.jpg" width="300" height="270" /></li>
	<li><img src="2.jpg" width="300" height="270" /></li>
	<li><img src="3.jpg" width="300" height="270" /></li>
	<li><img src="4.jpg" width="300" height="270" /></li>
	<li><img src="5.jpg" width="300" height="270" /></li>
</ul>

슬라이더는 아래와 같이 자바스크립트 코드로 새로운 EpiloumSlider 객체를 생성함으로서 만들어집니다. 생성자의 첫 번째 인자는 슬라이더로 변환할 <ul> 혹은 <ol> 요소의 CSS 선택자입니다. 두 번째 인자에는 그 아래에 속한 <li> 요소들의 너비(픽셀 단위)를 정수형으로 입력해야 합니다.

var slider = new EpiloumSlider('#slider', 300);

이것으로 슬라이더의 초기화는 완료됩니다.

 

주요 메소드 안내

.left( )	슬라이더가 좌측 슬라이드로 이동합니다. 슬라이더에서 현재 표시된 슬라이드가 첫 번째일 경우, 마지막 슬라이드로 이동합니다.
.right( )	슬라이더가 우측 슬라이드로 이동합니다. 슬라이더에서 현재 표시된 슬라이드가 마지막일 경우, 첫 번째 슬라이드로 이동합니다.
.pos(int n)	슬라이더가 n번째 슬라이드로 이동합니다. 첫 번째 슬라이드는 n의 값이 1이 아닌 0이라는 점에 유의해주세요.
.setPeriod(int ms)	슬라이더가 이동할 때 소요되는 시간을 설정합니다. 첫 번째 인자 ms는 소요되는 시간을 의미하며, 단위는 ms(1/1000초)입니다. 높은 값을 입력할수록 이동이 천천히 이루어집니다. 본 메소드를 호출하지 않는 경우 설정되는 기본값은 300ms입니다.
.setEasing(string s)	슬라이더가 이동할 때 전환효과를 부여하는 Easing function을 선택합니다. 첫 번째 인자 s는 Easing function의 이름을 의미합니다. 기본적으로 jQuery에는 시작부터 끝까지 일관된 속도를 유지하는 “linear”와 시작과 끝 부분에서 미미하게 속도가 느려지는 “swing”이 내장되어 있으며, 본 모듈에서 사용할 수 있는 Easing function도 그와 같습니다. 만약 jQuery UI를 임베디드한 경우에는 “easeInQuad”나 “easeOutElastic”을 비롯한 30여개의 Easing function을 더 선택할 수 있습니다. 자세한 내용은 jQuery UI Easing 문서를 참고하시기 바랍니다. 본 메소드를 호출하지 않는 경우 설정되는 기본값은 “swing”입니다.