캐러셀 기능 만들기 3

이번 수업에서는 JavaScript로 캐러셀의 초기 설정 및 슬라이드 넘기기 기능을 구현하는 방법을 알아보겠습니다.

복사
function showSlides(n) {
    let i
    let slides = document.getElementsByClassName('my-slides')
    let dots = document.getElementsByClassName('dot')

    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none'
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(' active', '')
    }
    slides[slideIndex - 1].style.display = 'block'
    dots[slideIndex - 1].className += ' active'
}

showSlides 함수는 인자의 값에 따라서 보여지는 슬라이드가 달라지도록 만들었습니다.

그래서 n이라는 인자를 받아서 사용합니다.

복사
let i
let slides = document.getElementsByClassName('my-slides')
let dots = document.getElementsByClassName('dot')

내부적으로 사용될 변수 3개를 선언하였습니다.

i는 반복문에서 사용될 변수이며, slides는 my-slides라는 클래스를 가진 요소들, 즉 슬라이드들을 모아놓은 배열입니다.

그리고 dots는 dot이라는 클래스를 가진 요소들, 즉 위치 표시기를 모아놓은 배열입니다.

복사
if (n > slides.length) {
    slideIndex = 1
}
if (n < 1) {
    slideIndex = slides.length
}

변수를 모두 선언한 후, if문을 사용하여 n의 값이 슬라이드의 개수를 초과하거나 1보다 작은 경우를 처리하였습니다.

n의 값이 슬라이드의 총 개수를 초과하면, 존재하지 않는 슬라이드를 보여주려고 시도하기 때문에 이에 대한 처리가 필요합니다.

먼저, n의 값이 슬라이드의 총 개수보다 큰 경우, slideIndex의 값을 1로 설정합니다. 이는 마지막 슬라이드에서 다음 버튼을 누르면 1번 슬라이드가 보여지도록 하기 위함입니다.

그리고 n의 값이 1보다 작은 경우, slideIndex의 값을 슬라이드의 총 개수로 설정합니다. 이는 첫 번째 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드가 보여지도록 하기 위함입니다.

이와 같은 방식으로 슬라이드가 회전목마처럼 순환되는 효과를 구현할 수 있습니다.

복사
for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
}

showSlides 함수는 보이는 슬라이드가 변경될 때 호출됩니다.

그래서 기존에 보여지고 있는 슬라이드를 숨겨야 합니다.

slides 배열에 있는 모든 슬라이드를 숨기기 위해서 for문을 사용했습니다.

처음 순회할 때에는 첫번째 슬라이드의 display 속성이 none으로 설정되고, 두번째 순회할 때에는 두번째 슬라이드의 display 속성이 none으로 설정되는 식으로 진행됩니다.

그렇게 마지막 슬라이드까지 순회하면, 모든 슬라이드가 숨겨지게 됩니다.

복사
for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace('active', '')
}

위치 표시기도 슬라이드가 변경될 때마다 초기화돼야 합니다.

위치 표시기는 현재 보여지고 있는 슬라이드를 표시해주는 역할을 하고 있습니다.

그래서 기존에 활성화되어 있던 위치 표시기를 비활성화시켜야 합니다.

위치 표시기는 active 클래스를 이용해서 활성화되어있다는 것을 표시하고 있습니다.

그래서 dots 배열에 있는 모든 위치 표시기를 순회하면서 active라는 클래스를 제거했습니다.

이를 통해 다른 슬라이드로 넘어가면서 위치 표시기도 변경될 수 있습니다.

복사
slides[slideIndex - 1].style.display = 'block'

슬라이드를 보여주는 것은 showSlides 함수의 핵심이지만 간단합니다.

slides 배열에서 slideIndex에 해당하는 슬라이드를 찾아서 display 속성을 block으로 설정해주면 됩니다.

이미 모든 슬라이드를 숨겼기 때문에, slideIndex에 해당하는 슬라이드만 보여지게 됩니다.

복사
dots[slideIndex - 1].className += ' active'

dots 배열에서 slideIndex에 해당하는 위치 표시기를 찾아서 active라는 클래스를 추가해주면 됩니다.