JS를 사용한 간단한 캐러셀 슬라이더

🎈 캐러셀 슬라이더(Carousel slider) 과제

• 여러 개의 이미지(그림, 사진, 영상 등)을 슬라이드 형태로 순환하며 보여주는 방식
• 보여지는 이미지 혹은 그림 유무
• 슬라이드를 이동할 수 있는 버튼 유무
• 마지막 슬라이드(5번째) 이후 다음 버튼 클릭 시 첫 번째 슬라이드(1번째)로 돌아오기

📝과제 : https://bighuni.github.io/JS-Study/Assignment/2주차

[정리]

• div.slide_content는 float: left로 붙여 놓는다. 이를 감싸는 div.slide_list는 슬라이드를 모두 합한 넓이를 가져야 슬라이드가 가로 일렬로 늘어서게 된다.

• div.slide_box를 overflow-x: hidden으로 주어 슬라이드 한 개만 보여지게 만든다.

• translate3d로 슬라이드를 이동하면서 다음 이미지를 확인한다.

[회고]

• JavaScript를 활용하여 간단한 캐러셀 슬라이드를 만들었는데, 버튼을 이용하여 다음 이미지를 불러와서 마지막 5번째 슬라이드에서 다음 버튼을 눌렀을 때, 다시 첫 슬라이드 이미지로 돌아오는 것을 구현하였다. 더욱 보완해야할 점은 이를 다시 첫 번째 슬라이드로 돌아오게끔 하는 것이 아니라 다음 버튼을 클릭하면 첫 번째 이미지로 넘어가는 것처럼 자연스럽게 구현할 필요성을 느꼈고, 이전 버튼을 클릭하면 이미지를 불러오지 않는 문제 등을 개선할 필요성을 느꼈다.

[구현]