lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter5Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter6Title

# 캐러셀 구조 만들기 3

## 이전 / 다음 버튼 만들기

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

<br/>

## 인디케이터 (Indicator)

```html title="인디케이터 버튼 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` 함수가 호출되어, 특정 슬라이드로 이동합니다.

<br/>

## 캐러셀 슬라이드 전환하기

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

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

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