캐러셀 기능 만들기 2

이번 수업에서는 JavaScript로 currentSlide 함수를 만들어 특정 슬라이드로 넘어가는 기능을 구현해 보겠습니다.

복사
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>

저희는 이전/다음 버튼 외에도 위치 표시기를 만들었습니다.

이 점으로 구성된 위치 표시기를 클릭했을 때, 특정 슬라이드로 이동하도록 구현해야 합니다.

첫 번째 점을 클릭하면 1번 슬라이드로, 두 번째 점을 클릭하면 2번 슬라이드로, 세 번째 점을 클릭하면 3번 슬라이드로 이동하는 기능입니다.

복사
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번 슬라이드가 보여지게 됩니다.