자바스크립트로 사용자 정의 이미지 슬라이더 만들기

웹사이트에서 여러 이미지를 효과적으로 보여주고 싶다면 이미지 슬라이더(Image Slider)가 가장 좋은 선택입니다. 외부 라이브러리 없이 순수 자바스크립트만으로도 이전/다음 버튼, 캡션, 네비게이션 도트까지 갖춘 슬라이더를 손쉽게 만들 수 있습니다.

이미지 슬라이더의 핵심 구성 요소

이번 예제에서 만들 슬라이더는 다음 세 가지 요소로 구성됩니다.

슬라이드 컨테이너: 이미지와 캡션을 감싸는 영역으로, 최대 너비를 지정해 화면 중앙에 배치합니다.
이전/다음 버튼: 좌우 화살표(❮ ❯)를 클릭해 슬라이드를 앞뒤로 이동시킵니다.
네비게이션 도트: 하단의 원형 점을 클릭하면 해당 번호의 슬라이드로 바로 이동할 수 있습니다.

전체 예제 코드

아래는 HTML, CSS, 자바스크립트를 모두 포함한 완성된 코드입니다. 그대로 복사해서 .html 파일로 저장한 뒤 브라우저에서 열면 바로 동작하는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .Slide {
        display: none;
    }
    img {
        vertical-align: middle;
        width: 100%;
        height: 400px;
    }
    .slideContainer {
        max-width: 600px;
        position: relative;
        margin: auto;
    }
    .prevBtn,
    .nextBtn {
        position: absolute;
        top: 50%;
        width: auto;
        padding: 10px;
        background-color: rgb(255, 255, 75);
        color: rgb(50, 0, 116);
        font-weight: bolder;
        font-size: 18px;
    }
    .nextBtn {
        right: 0;
    }
    .Caption {
        color: #fbff09;
        font-weight: bold;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 25px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }
    .Navdot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: rgb(54, 5, 117);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .selected,
    .Navdot:hover {
        background-color: #d9ff00;
    }
    @media only screen and (max-width: 450px) {
        .prevBtn,
        .nextBtn,
        .Caption {
            font-size: 16px;
        }
    }
</style>
</head>
<body>
<div class="slideContainer">
<div class="Slide">
<img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
<div class="Caption">Photo 1</div>
</div>
<div class="Slide">
<img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
<div class="Caption">Photo 2</div>
</div>
<div class="Slide">
<img src="https://images.unsplash.com/photo-1584910758141-f7993f9e203d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" />
<div class="Caption">Photo 3</div>
</div>
<a class="prevBtn">❮</a>
<a class="nextBtn">❯</a>
</div>
<br />
<div style="text-align:center">
<span class="Navdot" onclick="currentSlide(1)"></span>
<span class="Navdot" onclick="currentSlide(2)"></span>
<span class="Navdot" onclick="currentSlide(3)"></span>
</div>
<script>
    document.querySelector(".prevBtn").addEventListener("click", () => {
        changeSlides(-1);
    });
    document.querySelector(".nextBtn").addEventListener("click", () => {
        changeSlides(1);
    });
    var slideIndex = 1;
    showSlides(slideIndex);
    function changeSlides(n) {
        showSlides((slideIndex += n));
    }
    function currentSlide(n) {
        showSlides((slideIndex = n));
    }
    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("Slide");
        var dots = document.getElementsByClassName("Navdot");
        if (n > slides.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = slides.length;
        }
        Array.from(slides).forEach(item => (item.style.display = "none"));
        Array.from(dots).forEach(
            item => (item.className = item.className.replace(" selected", ""))
        );
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " selected";
    }
</script>
</body>
</html>

코드 작동 원리 살펴보기

1. 슬라이드 전환 로직

showSlides(n) 함수가 슬라이더의 핵심입니다. 먼저 모든 슬라이드를 display: none으로 숨긴 후, 현재 인덱스에 해당하는 슬라이드만 display: block으로 보여줍니다. 이렇게 하면 한 번에 하나의 이미지만 화면에 나타나게 됩니다.

2. 무한 순환 처리

마지막 슬라이드에서 '다음' 버튼을 누르면 첫 번째 슬라이드로 돌아가고, 첫 번째 슬라이드에서 '이전' 버튼을 누르면 마지막 슬라이드로 이동합니다. 이는 n > slides.length일 때 인덱스를 1로, n < 1일 때 마지막 인덱스로 되돌리는 조건문 덕분입니다.

3. 도트 상태 동기화

슬라이드가 바뀔 때마다 모든 도트에서 selected 클래스를 제거하고, 현재 활성화된 슬라이드에 대응하는 도트에만 클래스를 추가합니다. CSS의 transition 속성 덕분에 색상 변화가 부드럽게 적용됩니다.

4. 반응형 디자인

@media 쿼리를 사용해 화면 너비가 450px 이하인 모바일 환경에서는 버튼과 캡션의 글자 크기를 줄여 가독성을 확보했습니다.

실행 결과

위 코드를 실행하면 노란색 배경의 이전/다음 버튼과 하단의 보라색 네비게이션 도트가 있는 이미지 슬라이더가 나타납니다. 버튼을 클릭하거나 도트를 누르면 이미지가 전환되며, 현재 선택된 도트는 연노랑색으로 강조됩니다.

마무리 및 확장 아이디어

이처럼 자바스크립트만으로도 기능이 완전한 이미지 슬라이더를 만들 수 있습니다. 여기에 더해 다음과 같은 기능을 추가해 보세요.

setInterval()을 활용한 자동 재생(Auto-play) 기능
CSS transform과 transition을 이용한 부드러운 슬라이딩 애니메이션
키보드 방향키로 슬라이드를 조작하는 접근성 개선
터치 스와이프 이벤트 지원으로 모바일 사용성 향상

기본 원리를 이해했다면, 프로젝트 요구 사항에 맞게 자유롭게 커스터마이징해 보시기 바랍니다.

자바스크립트로 사용자 정의 이미지 슬라이더 만들기 – 단계별 완전 가이드