JavaScript를 활용한 이미지 슬라이더 구현하기

이번 글에서는 JavaScript만을 활용해 간단한 이미지 슬라이더를 구현하는 방법을 설명합니다.

 

HTML 구조

<div class="slider">
    <div class="slides">
        <img src="image1.jpg" alt="Image 1" class="slide">
        <img src="image2.jpg" alt="Image 2" class="slide">
        <img src="image3.jpg" alt="Image 3" class="slide">
    </div>
    <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
    <button class="next" onclick="moveSlide(1)">&#10095;</button>
</div>

슬라이더 안에 이미지와 왼쪽/오른쪽 화살표 버튼을 추가합니다.

 

CSS 스타일링

.slider {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    width: 100%;
    height: auto;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

 

javascript

<script>
let currentIndex = 0;

function moveSlide(step) {
    const slides = document.querySelector('.slides');
    const totalSlides = document.querySelectorAll('.slide').length;

    currentIndex = (currentIndex + step + totalSlides) % totalSlides;
    const slideWidth = document.querySelector('.slide').clientWidth;

    slides.style.transform = `translateX(${-currentIndex * slideWidth}px)`;
}

</script>

 

 

• 이 코드는 사용자가 화살표 버튼을 클릭할 때 슬라이더가 해당 방향으로 이동하도록 합니다.
• currentIndex 변수는 현재 슬라이더의 인덱스를 추적하고, 슬라이드의 넓이를 기준으로 슬라이드를 이동시킵니다.

자동 슬라이더 기능 추가 (선택 사항)

setInterval(() => {
    moveSlide(1);
}, 3000); // 3초마다 자동으로 슬라이드 이동

 

 

이 슬라이더는 다양한 웹사이트에서 사용할 수 있으며, JavaScript만으로 구현했기 때문에 커스터마이징이 용이합니다.