자바스크립트 DOM을 이용한 애니메이션 없는 슬라이더
슬라이더(Slider)는 사용자의 조작 또는 타이머에 따라 페이지를 넘기듯 콘텐츠를 보여주는 형태의 UI를 부르는 말입니다. 한정된 웹 브라우저 화면에 여러 콘텐츠를 표시하기 위해서는 슬라이더만한 것이 없습니다.
검색엔진을 이용하면 자바스크립트나 jQuery를 이용해서 Slide 애니메이션이나 Fade 효과가 들어간 슬라이더 모듈을 많이 찾아볼 수 있습니다. 그러나 아이러니하게도 애니메이션 없이 작동하는 슬라이더는 찾아보기 어렵습니다. 그렇다고 소스코드를 열어 커스터마이징을 하자니, 이런 모듈들은 내부구조가 대체로 복잡한 편이라서 흥미도 의욕도 나지 않는 경우가 많습니다.
이번 포스팅에서는 자바스크립트 DOM 객체에 접근해 간단하게 구현한 애니메이션 없는 슬라이더를 소개합니다. 먼저 예제 소스코드부터 공개합니다.