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

캐러셀 기능 만들기 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번 슬라이드로 이동하는 기능입니다.

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

다음 내용이 궁금하다면?

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