lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroBioChapter2Title

webIntroBioChapter1Title

webIntroBioChapter3Title

# 캐러셀 동작시키기

이제 JavaScript를 활용해 캐러셀을 동작시켜볼 거예요.

 

**초기값 설정하기**

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

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

먼저 `slideIndex`라는 변수를 만들어서, 현재 보여지고 있는 슬라이드의 인덱스를 저장할 거에요.

처음에는 1번 슬라이드가 보여지도록 하기 위해 `slideIndex`의 값을 1로 설정했어요.

그리고 `showSlides`라는 함수를 호출하고, 인자로는 `slideIndex`의 값을 넘겨줬어요.

여기서는 `slideIndex`의 값이 1이기 때문에 1번 슬라이드가 보여지겠죠?

 

**슬라이드 넘기는 기능 구현하기**

```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`의 값이 1이라서 1번 슬라이드가 보여지고 있을 때, `plusSlides(1)` 함수를 호출하면 `slideIndex`의 값이 2가 되어서 2번 슬라이드가 보여지겠죠?

또, `slideIndex`의 값이 2라서 2번 슬라이드가 보여지고 있을 때, `plusSlides(-1)` 함수를 호출하면 `slideIndex`의 값이 1이 되어서 1번 슬라이드가 보여질거예요.

이렇게 `plusSlides` 함수를 호출하면, `slideIndex`의 값이 1씩 증가하거나 감소하면서 슬라이드가 넘어가요.

 

**특정 슬라이드로 넘기는 기능 만들기**

```html title="인디케이터 만들기"



```

이전/다음 버튼 외에도 인디케이터를 만들었어요.

이 점으로 만들어진 인디케이터를 클릭했을 때, 특정 슬라이드로 넘어가도록 만들어야 해요.

첫번째 점을 클릭하면 1번 슬라이드로, 두번째 점을 클릭하면 2번 슬라이드로, 세번째 점을 클릭하면 3번 슬라이드로 넘어가도록 만들어야 하는거죠.

```js title="currentSlide 함수 선언"
function currentSlide(n) {
 showSlides((slideIndex = n));
}
```

`currentSlide` 함수는 방금 만든 `plusSlides` 함수와 마찬가지로 `showSlides` 함수를 호출하는 함수로 만들었어요.

다만 `showSlides` 함수를 호출할 때, `slideIndex`의 값을 `n`으로 설정했어요.

그래서 `n`의 값이 1이면 `slideIndex`의 값이 1이 되고, 2이면 `slideIndex`의 값이 2가 되고, 3이면 `slideIndex`의 값이 3이 되겠죠?

그럼 `slideIndex`의 값이 1이라서 1번 슬라이드가 보여지고 있을 때, `currentSlide(3)` 함수를 호출하면 `slideIndex`의 값이 3가 되어서 3번 슬라이드가 보일거예요.