캐러셀 기능 만들기 1
이번 수업에서는 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>
캐러셀의 구조를 잡으면서 이전/다음 버튼을 만들었습니다.
이제 이 버튼을 클릭했을 때 슬라이드가 넘어가도록 구현해야 합니다.
슬라이드가 넘어가게 하는 plusSlides 함수 선언
function plusSlides(n) {
showSlides(slideIndex += n);
}
앞서 언급한 showSlides 함수는 인자의 값에 따라 보여지는 슬라이드가 달라지도록 구현하였습니다.
plusSlides 함수는 showSlides 함수를 호출하는 함수로 구현하였습니다.
다만, showSlides 함수를 호출할 때 slideIndex의 값을 n만큼 증가시켜서 호출합니다.
따라서 n의 값이 1이면 slideIndex의 값이 1 증가하고, -1이면 slideIndex의 값이 1 감소합니다.
이러한 방식으로 slideIndex의 값이 변함에 따라 슬라이드가 넘어가게 됩니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!