캐러셀 구조 만들기 3

이번 수업에서는 이전/다음 버튼과 인디케이터를 만들어 캐러셀의 구조를 완성해보겠습니다.

복사
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

캐러셀을 이전 및 다음 슬라이드로 이동시키는 버튼은 HTML <a> 요소로 구성했습니다.

prev 클래스를 가진 버튼은 캐러셀을 이전 슬라이드로 이동시키고, next 클래스를 가진 버튼은 캐러셀을 다음 슬라이드로 이동시킵니다.

사용자가 버튼을 클릭하면 각 버튼에 할당된 JavaScript 함수가 호출됩니다.

예를 들어 prev 클래스를 포함한 버튼을 클릭하면 plusSlides(-1) 함수가 호출되어 캐러셀이 현재 슬라이드에서 이전 슬라이드로 이동합니다.

마찬가지로, next 클래스를 포함한 버튼을 클릭하면 plusSlides(1) 함수가 호출되어 현재 슬라이드에서 다음 슬라이드로 이동합니다.

복사
<div style="text-align: center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

인디케이터는 현재 표시되는 슬라이드를 나타내고, 인디케이터를 클릭하면 특정 슬라이드로 이동할 수 있습니다.

이번 캐러셀에는 인디케이터로 점(dot)를 사용하겠습니다.

각각의 인디케이터는 <span> 요소로 구성되어 있으며, dot 클래스를 가지고 있습니다.

인디케이터를 클릭하면 currentSlide 함수가 호출되어, 특정 슬라이드로 이동합니다.

지금까지 HTML을 활용해 캐러셀의 레이아웃을 구성했습니다.

하지만 앞서 말씀드린 것처럼 HTML만으로는 캐러셀을 이전, 다음 슬라이드로 넘길 수 없습니다. 슬라이드를 전환하며 회전하는 캐러셀로 만들기 위해서는 JavaScript를 사용해야 합니다.

JavaScript를 활용해 동작을 구현하기 전에, CSS로 캐러셀을 간단하게 꾸며 보겠습니다.