lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter5Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter6Title

# 캐러셀 기능 만들기 1

이번 수업에서는 JavaScript를 활용하여 캐러셀의 기능을 만들어보겠습니다.

<br />

## 초기 설정하기

```js title="초기 설정하기"
let slideIndex = 1;

showSlides(slideIndex);
```

캐러셀의 기능을 본격적으로 만들기 전에 초기 설정을 해야 합니다.

먼저 `slideIndex`라는 변수를 선언하여, 현재 보여지고 있는 슬라이드의 인덱스를 저장합니다.

처음에는 1번 슬라이드가 보여지도록 `slideIndex`의 값을 1로 설정합니다.

그리고 `showSlides`라는 함수를 호출합니다.

인자로는 `slideIndex`의 값을 넘겨줍니다.

이 함수는 슬라이드를 보여주는 역할을 하며, 인자의 값에 따라 보여지는 슬라이드가 달라집니다.

여기서는 `slideIndex`의 값이 1이므로, 1번 슬라이드가 보여집니다.

<br/>

## 슬라이드 넘기기 기능 만들기

```html title="이전/다음 버튼 만들기"
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
```

캐러셀의 구조를 잡으면서 이전/다음 버튼을 만들었습니다.

이제 이 버튼을 클릭했을 때 슬라이드가 넘어가도록 구현해야 합니다.

```js title="슬라이드가 넘어가게 하는 plusSlides 함수 선언"
function plusSlides(n) {
    showSlides(slideIndex += n);
}
```

앞서 언급한 `showSlides` 함수는 인자의 값에 따라 보여지는 슬라이드가 달라지도록 구현하였습니다.

`plusSlides` 함수는 `showSlides` 함수를 호출하는 함수로 구현하였습니다.

다만, `showSlides` 함수를 호출할 때 `slideIndex`의 값을 `n`만큼 증가시켜서 호출합니다.

따라서 `n`의 값이 1이면 `slideIndex`의 값이 1 증가하고, -1이면 `slideIndex`의 값이 1 감소합니다.

이러한 방식으로 `slideIndex`의 값이 변함에 따라 슬라이드가 넘어가게 됩니다.