[바닐라코딩]자바스크립트로 캐러셀(Carousel) 구현하기

강재영
강재영
Jun 13 · 5 min read
자동으로 넘어가는 캐러셀입니다.

DOM 관련 첫 번째 과제였던 캐러셀 과제를 리뷰하겠습니다.

TODO

1. Carousel UI란 여러 개의 이미지(혹은 영상)을 슬라이드 형태로 순환하며 보여주는 방식의 UI를 뜻합니다.

2. 주어진 이미지들을 이용하여 본인의 스타일대로 Carousel UI를 구현해주세요.

3. 동시에 보여지는 이미지의 갯수는 1개여야 합니다.

4. 슬라이드의 왼쪽과 오른쪽으로 이동할 수 있는 버튼이 있어야 합니다.

5. 다섯번째 슬라이드에서 오른쪽 버튼을 누른다면 첫번째 슬라이드로 이동하여야 합니다.

Markup(마크업) 작업

CSS 작업

크기를 여러개로 나누어 미디어쿼리를 적용했습니다. 그래서 css 파일이 조금 깁니다. (중복코드도 많습니다 ㅠㅠ)

JavaScript 작업

2. 좌우 버튼 클릭 할 때 캐러셀 동작 구현

버튼 클릭하면 움직이지만 자동넘김 때문에 조금 머뭇거립니다.

3. 자동으로 넘어가는 캐러셀 동작 구현

2초마다 자동으로 다음 페이지로 넘어갑니다.