Epiloum Slider – 간결한 HTML 마크업을 기반으로 하는 jQuery 애니메이션 슬라이더

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

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

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

 

파일구성

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

Download Button

Continue reading

자바스크립트 DOM을 이용한 애니메이션 없는 슬라이더

슬라이더(Slider)는 사용자의 조작 또는 타이머에 따라 페이지를 넘기듯 콘텐츠를 보여주는 형태의 UI를 부르는 말입니다. 한정된 웹 브라우저 화면에 여러 콘텐츠를 표시하기 위해서는 슬라이더만한 것이 없습니다.

검색엔진을 이용하면 자바스크립트나 jQuery를 이용해서 Slide 애니메이션이나 Fade 효과가 들어간 슬라이더 모듈을 많이 찾아볼 수 있습니다. 그러나 아이러니하게도 애니메이션 없이 작동하는 슬라이더는 찾아보기 어렵습니다. 그렇다고 소스코드를 열어 커스터마이징을 하자니, 이런 모듈들은 내부구조가 대체로 복잡한 편이라서 흥미도 의욕도 나지 않는 경우가 많습니다.

이번 포스팅에서는 자바스크립트 DOM 객체에 접근해 간단하게 구현한 애니메이션 없는 슬라이더를 소개합니다. 먼저 예제 소스코드부터 공개합니다.

Continue reading