본문으로 건너뛰기
실습하기

캐러셀 구조 만들기 3

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


이전 / 다음 버튼 만들기​

이전/다음 버튼 HTML
<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) 함수가 호출되어 현재 슬라이드에서 다음 슬라이드로 이동합니다.


인디케이터 (Indicator)​

인디케이터 버튼 HTML
<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로 캐러셀을 간단하게 꾸며 보겠습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!