캐러셀 슬라이드 제어하기

이번 수업에서는 JavaScript를 활용해 캐러셀 슬라이드를 제어해볼게요.

슬라이드 보여주는 기능 만들기

Copy
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 함수를 만들어볼게요.

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

변수 선언

Copy
let i;
let slides = document.getElementsByClassName('my-slides');
let dots = document.getElementsByClassName('dot');

내부적으로 사용될 변수 3개를 선언했어요.

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

그리고 dots는 dot이라는 클래스를 가진 요소들, 인디케이터를 모아놓은 배열이에요.

슬라이드의 개수가 넘어가는 경우 처리하기

Copy
if (n > slides.length) {
  slideIndex = 1;
}
if (n < 1) {
  slideIndex = slides.length;
}

변수를 다 선언한 뒤에는 if문을 사용해서 n의 값이 슬라이드의 개수보다 크거나 작을 때를 처리했어요.

n의 값이 슬라이드의 개수보다 크거나 작으면, 존재하지 않는 슬라이드를 보여주려고 하기 때문에 이에 대한 처리를 해줘야 해요.

먼저 n의 값이 슬라이드의 개수보다 크면, slideIndex의 값을 1로 설정했어요.

마지막 슬라이드에서 다음 버튼을 누르면 1번 슬라이드가 보여지도록 하기 위해서에요.

그리고 n의 값이 1보다 작으면, slideIndex의 값을 슬라이드의 개수로 설정했어요.

첫번째 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드가 보여지도록 하기 위해서에요.

이렇게 하면 회전목마처럼 슬라이드가 순환되는 효과를 구현할 수 있어요.

슬라이드 숨기기

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

showSlides 함수는 보이는 슬라이드가 변경될 때 호출돼요.

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

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

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

그렇게 마지막 슬라이드까지 순회하면, 모든 슬라이드가 숨겨지겠죠?

인디케이터 초기화하기

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

인디케이터도 슬라이드가 변경될 때마다 초기화돼야 해요.

인디케이터는 현재 보여지고 있는 슬라이드를 표시해주는 역할을 하고 있어요.

그래서 기존에 활성화되어 있던 인디케이터를 비활성화시켜야 해요.

인디케이터는 active 클래스를 이용해서 활성화되어있다는 것을 표시하고 있어요.

그래서 dots 배열에 있는 모든 인디케이터를 순회하면서 active라는 클래스를 제거했어요.

슬라이드 표시하기

Copy
slides[slideIndex - 1].style.display = 'block';

slides 배열에서 slideIndex에 해당하는 슬라이드를 찾아서 display 속성을 block으로 설정해주면 슬라이드가 화면에 나타나요.

이미 모든 슬라이드를 숨겼기 때문에, slideIndex에 해당하는 슬라이드만 볼 수 있어요.

인디케이터 활성화하기

Copy
dots[slideIndex - 1].className += ' active';

dots 배열에서 slideIndex에 해당하는 인디케이터를 찾아서 active 클래스를 추가해요.