[javascript] 자바스크립트로 이미지 슬라이더에 캐러셀 효과 구현하기

12 Dec 2023

javascript

캐러셀 효과를 가진 이미지 슬라이더를 자바스크립트로 구현하는 방법에 대해 알아보겠습니다.

HTML 구조

우선 캐러셀에 사용할 이미지들과 이전/다음 버튼을 담은 요소를 HTML로 작성합니다.

<div class="carousel">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev">이전</button>
  <button class="next">다음</button>
</div>

CSS 스타일링

다음으로, 슬라이더와 버튼을 스타일링합니다.

.carousel {
  position: relative;
  overflow: hidden;
}

.slides {
  display: flex;
}

img {
  width: 100%;
  flex: 0 0 auto;
}

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

.prev {
  left: 0;
}

.next {
  right: 0;
}

자바스크립트 구현

이제 자바스크립트를 사용하여 캐러셀 효과를 구현합니다.

const slides = document.querySelector('.slides');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
const slideWidth = slides.clientWidth;
let currentSlide = 0;

nextButton.addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % slides.children.length;
  slides.style.transform = `translateX(${-slideWidth * currentSlide}px)`;
});

prevButton.addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + slides.children.length) % slides.children.length;
  slides.style.transform = `translateX(${-slideWidth * currentSlide}px)`;
});

이제 페이지를 새로고침하여 이미지 슬라이더에 캐러셀 효과가 적용된 것을 확인할 수 있습니다.

위의 코드를 활용하여 쉽게 자바스크립트를 사용하여 이미지 슬라이더에 캐러셀 효과를 구현할 수 있습니다.

참고 자료