[javascript] 이미지 슬라이더에 자동 재생 기능 추가하기

12 Dec 2023

javascript

이미지 슬라이더는 웹 사이트에서 시각적으로 매력적인 요소 중 하나입니다. 사용자들이 쉽게 각 이미지를 볼 수 있도록 이미지를 자동으로 변경하는 기능을 추가하고 싶을 수 있습니다. 이번 글에서는 JavaScript를 사용하여 이미지 슬라이더에 자동 재생 기능을 추가하는 방법을 알아보겠습니다.

필요한 기능

이미지 슬라이더 엘리먼트 선택: JavaScript에서 이미지 슬라이더의 DOM 엘리먼트를 선택합니다.
이미지 리스트 관리: 이미지 슬라이더에 표시할 이미지들을 관리합니다.
자동 재생 기능: 일정 시간 간격으로 이미지를 변경하여 자동 재생 기능을 구현합니다.

이미지 슬라이더 생성

우선 HTML과 CSS로 기본적인 이미지 슬라이더를 생성합니다. 간단한 형태의 이미지 슬라이더를 만들어 JavaScript를 추가하는 방식으로 진행하겠습니다.

HTML

<div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</div>

CSS

.slider {
    position: relative;
    overflow: hidden;
}
.slider img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript로 자동 재생 기능 추가

const slider = document.querySelector('.slider');
const images = slider.getElementsByTagName('img');
let currentIndex = 0;
const intervalTime = 3000; // 이미지 전환 간격 (ms)

function startSlide() {
    setInterval(() => {
        images[currentIndex].style.display = 'none';
        currentIndex = (currentIndex + 1) % images.length;
        images[currentIndex].style.display = 'block';
    }, intervalTime);
}

startSlide();

위의 JavaScript 코드는 이미지 슬라이더에 자동 재생 기능을 추가하는 방법을 보여줍니다. setInterval 함수를 사용하여 일정 시간 간격으로 이미지를 변경하고, currentIndex를 사용하여 현재 이미지를 추적합니다.

마무리

이제 자동 재생 기능이 추가된 이미지 슬라이더가 준비되었습니다. 사용자는 페이지를 방문할 때 이미지 슬라이더가 자동으로 전환되는 것을 확인할 수 있을 것입니다. 기능을 더 확장하고자 한다면, 다양한 옵션을 추가하여 사용자 경험을 향상시킬 수 있습니다.

위의 예제는 간단한 형태의 자동 재생 이미지 슬라이더를 보여주는 것이며, 실제 프로젝트에서 사용할 때에는 더 많은 요구사항을 고려해야 할 수 있습니다.

이제 이미지 슬라이더에 자동 재생 기능을 추가하는 방법을 익혔습니다. 웹 페이지에 더 매력적인 이미지 슬라이더를 추가하여 사용자들에게 시각적인 즐거움을 제공할 수 있을 것입니다.

필요한 기능

이미지 슬라이더 생성

HTML

CSS

JavaScript로 자동 재생 기능 추가

마무리

참고 자료