바닐라 JS 로 이미지 슬라이드 만들기

Do it 자바스크립트 입문 책의 실습 과제 일부를 정리한 내용입니다.

구현해야 할 기능의 프로그램 적 순서를 미리 생각해보면 좋습니다. 이미지 슬라이드를 만들고 이전, 다음 버튼으로 넘기며 보여주는 기능.. 이라고만 생각하고 시작할 수 도 있지만 입문자라면 구체적으로 어떤 순서로 기능을 만들어가는지 대략적 순서를 생각하고 시작하는 게 좋습니다. 이미지 슬라이드 기능 구현 순서는 대략 아래와 같습니다.

1. 슬라이드 쇼에 사용할 이미지를 배열로 만든 다음에 보이지 않게 하고
2. 디폴트로 보여줄 이미지만(배열의 첫번째 이미지) 보이게 하고
3. 배열의 인덱스 넘버를 활용해 이미지를 이동하는데
4. 이전 버튼을 누르면 인덱스 넘버를 1씩 빼는데, 첫번째 이미지라서 이전 이미지가 없다면 마지막 이미지를 불러오고
5. 다음 버튼을 누르면 인덱스 넘버를 1씩 더하는데, 마지막 이지라서 다음이 없으면 첫번째 이미지를 불러온다.

기본 세팅된 html 문서의 구조는 아래와 같습니다.

<div class="wrapper">
  <div id="container">
    <img src="images/pic-1.jpg" />
    <img src="images/pic-2.jpg" />
    <img src="images/pic-3.jpg" />
    <img src="images/pic-4.jpg" />
    <button id="prev">&lang;</button>
    <button id="next">&rang;</button>
  </div>
</div>

따로 생성한 js 파일을 위 html 파일에 연결한 후, 아래와 같이 변수를 선언, 할당합니다. id 가 container 인 요소 안의 img 태그를 모두 선택해서 배열로 담고, id 값으로 이전, 이후 버튼을 찾아서 정의하고 current 변수에는 숫자 0을 담는데 이 숫자를 더하거나 빼면서 이미지 슬라이드를 구현합니다.

let slides = document.querySelectorAll("#container > img");
let prev = document.querySelector("#prev");
let next = document.querySelector("#next");
let current = 0;

우선 배열에 담긴 이미지를 모두 숨기고, 첫번째 이미지만 보이도록 설정합니다. for 반복문으로 배열을 순회하며 각 요소에 display : none 속성을 주어 보이지 않게 하고 n 번째 이미지만 block 을 주어 보이게 합니다.

showSlide(current);

function showSlide(n) {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[n].style.display = "block";
}

이제 이전, 다음 버튼을 클릭해서 current 의 숫자만 바꾸어 주면 됩니다. 이전 버튼을 누르면 -1 을 하는데 첫번째 이미지라면 마지막 이미지를 보여주고, 다음 버튼을 누르면 +1 을 하는데 마지막 이미지라면 첫번째 이미지를 보여줍니다.

prev.onclick = preSlide;
next.onclick = nextSlide;

function preSlide() {
  if (current > 0) current -= 1;
  else current = slides.length - 1;
  showSlide(current);
}

function nextSlide() {
  if (current < slides.length - 1) current += 1;
  else current = 0;
  showSlide(current);
}