캐러셀 (Carousel)

프로젝트 목표

• 버튼 클릭에 따라 이전, 다음 이미지를 보여주는 슬라이드를 구현
• 자동 슬라이드 구현

결과물

포인트

이전, 다음 버튼 클릭 시 슬라이드 영역 이동 시키기

이미지 하나의 가로 크기를 구하고 이미지들을 감싸는 슬라이드 영역을 해당 크기만큼 이동시키는 원리이다.

  let currentIndex = 0;
  const maxIndex = images.length - 1;
  // 1. 슬라이드 영역 안의 요소 가로 크기를 구한다. 
  const width = images[0].clientWidth;

  const slideImage = (currentIndex) => {
    // 2. 이전, 다음 버튼 클릭에 따라 currentIndex 값이 변한다. 
    const offset = -currentIndex * width;
    $carousel.style.transform = `translateX(${offset}px)`;
  };

setInterval

자동 슬라이드 구현을 위해 일정 시간마다 특정 함수를 실행시킨다.

$carouselContainer.addEventListener('mouseenter', stopSlide);
$carouselContainer.addEventListener('mouseleave', startSlide);

const stopSlide = () => {
    clearInterval(intervalId);
  };

const startSlide = () => {
  intervalId = setInterval(() => {
    currentIndex =
      currentIndex === maxIndex ? (currentIndex = 0) : currentIndex + 1;

    slideImage(currentIndex);
  }, intervalTime);
};