웹 페이지를 보다보면 가장 많이 보는 기능 중 하나가 이미지 여러장이 슬라이드 되는 것인데, 이것을 '캐러셀(Carousel)'이라고 한다. 배경색 랜덤 변경에 이어 자바스크립트 미니 프로젝트로 캐러셀 기능을 구현해 보았다.
미니 프로젝트 게이트 페이지 바로가기>

최종 결과물

• 초기 디폴트 이미지 노출
• 좌, 우 화살표 클릭 시 이미지가 순서대로 이전, 다음 이미지로 변경
• 다섯 번째 이미지에서 우측 화살표 클릭 시 첫 번째 이미지로 변경
• 첫 번째 이미지에서 좌측 화살표 클릭 시 다섯 번째 이미지로 변경
• 이미지 하단 버튼 클릭 시 버튼과 같은 순서의 이미지로 변경

HTML

<h1>Carousel</h1>
    <input type="button" class="arrow" id="leftarrow" value="&lt;">
    <input type="button" class="arrow" id="rightarrow" value="&gt;">
    <div>
        <img id="pic">
    </div>
    <div id="buttons">
        <input type="button" class="button">
        <input type="button" class="button">
        <input type="button" class="button">
        <input type="button" class="button">
        <input type="button" class="button">         
    </div>

Java Script

const images = ['0.png', '1.png', '2.png', '3.png', '4.png'];
// 변경해야 할 이미지들의 소스를 배열로 생성 
const buttons = document.querySelectorAll('.button');
const rightArrow = document.querySelector('#rightarrow');
const leftArrow = document.querySelector('#leftarrow');
let pic = document.querySelector('#pic');

pic.setAttribute('src', images[0]);  // 초기 이미지 지정

// 이미지 하단 버튼 클릭 시 이미지 변경 
for(let i=0; i<buttons.length; i++) {
    buttons[i].onclick = function() {
        pic.setAttribute('src', images[i]);
    }  // i번째 버튼 클릭 시 이미지의 소스를 images 배열의 i번째 소스로 변경 
}

// 우측 화살표 버튼 클릭 시 이미지 변경 
rightArrow.addEventListener('click', function() {
    for(let i=0; i<images.length; i++) {
        if(pic.getAttribute('src') === images[i]) { // 현재 이미지 = i번째 이미지일때
            if (i === images.length-1) {
                pic.setAttribute('src', images[0]);
                break; // 현재 마지막 이미지라면 버튼 클릭 시 첫 번째 이미지로 이동
            } else {
                pic.setAttribute('src', images[i+1]); // 그 외라면 다음 이미지(i+1번째)로 이동
                break;
            }
        }   
    }
})

// 좌측 화살표 버튼 클릭 시 이미지 변경 
leftArrow.addEventListener('click', function() {
    for(let i=0; i<images.length; i++) {
        if(pic.getAttribute('src') === images[i]) { // 현재 이미지 = i번째 이미지일때
            if (i === 0) {
                pic.setAttribute('src', images[images.length-1]);
                break; // 현재 첫 번째 이미지라면 버튼 클릭 시 마지막 이미지로 이동
            } else {
                pic.setAttribute('src', images[i-1]); // 그 외라면 다음 이미지(i-1번째)로 이동
                break;
            }
        }   
    }
})

캐러셀을 만들면서 가장 시간이 오래 걸린 부분은 처음에 컨셉을 잡는 부분이었다.
이미지를 5개 전부 visibility: hidden;이나 display: none;으로 보이지 않도록 넣어놓고 버튼에 따라서 특정 이미지만 보이게 해야하는 것인지 고민하기도 하다가...구현하기 어려워서 포기했다.
switch를 사용해서 이미지 하나하나를 case로 만드는 단순한 코드를 짜기도 했었는데 이미지가 5개 아닌 100개라면? 1000개라면? 이라는 생각으로 조금 더 코드 재사용성을 고려하여 for문을 활용하여 코드를 작성했다.