캐러셀 동작시키기
이제 JavaScript를 활용해 캐러셀을 동작시켜볼 거예요.
초기값 설정하기
let slideIndex = 1;
showSlides(slideIndex);
캐러셀의 기능을 본격적으로 만들기 전에 초기 설정을 해줘야 해요.
먼저 slideIndex라는 변수를 만들어서, 현재 보여지고 있는 슬라이드의 인덱스를 저장할 거에요.
처음에는 1번 슬라이드가 보여지도록 하기 위해 slideIndex의 값을 1로 설정했어요.
그리고 showSlides라는 함수를 호출하고, 인자로는 slideIndex의 값을 넘겨줬어요.
여기서는 slideIndex의 값이 1이기 때문에 1번 슬라이드가 보여지겠죠?
슬라이드 넘기는 기능 구현하기
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
캐러셀의 구조를 잡으면서 이전/다음 버튼을 만들었어요.
이제 이 버튼을 클릭했을 때, 슬라이드가 넘어가도록 만들어야 해요.
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씩 증가하거나 감소하면서 슬라이드가 넘어가요.
특정 슬라이드로 넘기는 기능 만들기
<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번 슬라이드가 보일거예요.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!