📙 Carousel 만들기

💁🏻‍♀️ 서론

캐러셀은 이미지 컬렉션이나 기타 콘텐츠를 슬라이드쇼 형식으로 표시하는 데 사용되는 인기 있는 웹 디자인 요소입니다.
HTML, CSS 및 JavaScript를 사용하여 간단한 캐러셀을 만드는 방법을 살펴보겠습니다.

❶ HTML

캐러셀의 HTML 구조부터 시작하겠습니다.

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="https://picsum.photos/id/870/536/354" alt="Dummy Image">
    <img src="https://picsum.photos/id/537/536/354" alt="Dummy Image">
    <img src="https://picsum.photos/id/1060/536/354" alt="Dummy Image">
  </div>
  <button class="carousel-prev">prev</button>
  <button class="carousel-next">next</button>
</div>

이 코드는 세 개의 이미지를 표시하는 기본 캐러셀 또는 이미지 슬라이더용입니다.

1. carousel-container 클래스가 있는 컨테이너 div로 시작합니다.
   이 컨테이너 내에는 표시될 이미지를 포함하는 carousel-slide 클래스가 있는 div가 있습니다.
2. 각각 웹사이트 이미지 소스 URL이 있는 3개의 img 요소가 있습니다.
3. 이미지 div 뒤에 carousel-prev 및 carousel-next 클래스가 있는 두 개의 버튼 요소가 있습니다.
   이 버튼을 사용하면 사용자가 캐러셀 이미지를 앞, 뒤로 탐색 할 수 있습니다.

❷ CSS

이제 HTML 구조를 갖추었으므로 몇 가지 기본 CSS를 추가하여 캐러셀의 스타일을 지정하겠습니다.

.carousel-container {
  position: relative;
  width: 536px;
  height: 354px;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  height: 100%;
}

.carousel-slide img {
  width: 536px;
  height: 354px;
  object-fit: cover;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: skyblue;
  color: white;
  border: none;
  border-radius: 30%;
  outline: none;
  cursor: pointer;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

앞서 보여드린 캐러셀 코드의 CSS 스타일입니다.

1. .carousel-container 클래스에는 상대 위치가 지정되어 배치된 하위 요소가 이 컨테이너와 관련하여 배치될 수 있습니다.
2. 캐러셀의 크기를 제한하기 위해 너비와 높이가 고정되어 있으며 overflow: hidden은 컨테이너 크기를 초과하는 콘텐츠를 숨기는 데 사용됩니다.
3. .carousel-slide 클래스는 이미지가 일렬로 표시되도록 flex, 컨테이너 높이를 채우도록 height 100%로 표시됩니다.
4. .carousel-slide img 클래스는 모든 이미지가 동일한 크기를 갖도록 고정된 너비와 높이가 제공됩니다. object-fit: cover는 이미지가 컨테이너를 완전히 덮도록 하는 데 사용됩니다.
5. .carousel-prev 및 .carousel-next 클래스는 carousel 컨테이너에 상대적으로 배치되도록 position: absolute로 스타일이 지정됩니다.
6. 상단은 50%로 설정되고 transform: translateY(-50%)는 버튼을 수직으로 중앙에 배치합니다.

❸ 자바스크립트

이제 캐러셀이 작동하도록 자바스크립트를 추가하겠습니다.

const carouselSlide = document.querySelector(".carousel-slide");
const carouselImages = document.querySelectorAll(".carousel-slide img");

const prevButton = document.querySelector(".carousel-prev");
const nextButton = document.querySelector(".carousel-next");

let counter = 1;
const size = 536;

carouselSlide.style.transform = `translateX(${-size}px)`;

nextButton.addEventListener("click", () => {
  if (counter >= carouselImages.length - 1) return;
  carouselSlide.style.transition = "transform 0.4s ease-in-out";
  counter++;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
});

prevButton.addEventListener("click", () => {
  if (counter <= 0) return;
  carouselSlide.style.transition = "transform 0.4s ease-in-out";
  counter--;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;
});

carouselSlide.addEventListener("transitionend", () => {
  if (carouselImages[counter].id === "lastClone") {
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - 2;
    carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  }

  if (carouselImages[counter].id === "firstClone") {
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - counter;
    carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  }
});

이 코드는 캐러셀의 동작을 제어하고 탐색 버튼을 사용하여 이미지를 왼쪽이나 오른쪽으로 이동할 수 있습니다.

1. 코드의 처음 두 줄은 캐러셀 슬라이드 컨테이너와 그 안의 모든 이미지를 선택하고 변수에 저장합니다.

2. 다음 두 줄은 각각 이전 버튼과 다음 버튼을 선택하여 변수에 저장합니다.

3. 카운터 변수는 1로 초기화되고 크기 변수는 캐러셀 컨테이너의 너비로 설정됩니다.

4. 캐러셀 슬라이드는 한 이미지 너비만큼 왼쪽으로 이동하여 두 번째 이미지가 처음에 보입니다.

5. 다음 버튼 클릭을 수신하기 위해 nextButton 이벤트 리스너가 추가되었습니다.
   카운터 변수가 이미지의 끝에 도달했는지 확인하고 그렇지 않은 경우 카운터 변수를 증가시키고 캐러셀 슬라이드를 한 이미지 너비만큼 왼쪽으로 이동합니다.

6. 이전 버튼의 클릭을 수신하기 위해 prevButton 이벤트 리스너가 추가되었습니다.

7. 카운터 변수가 이미지의 시작 부분에 있는지 확인하고 그렇지 않은 경우 카운터 변수를 감소시키고 캐러셀 슬라이드를 한 이미지 너비만큼 오른쪽으로 이동합니다.

8. carouselSlide 이벤트 리스너는 carouselSlide의 CSS 전환이 완료될 때 실행되는 transitionend 이벤트를 수신합니다.

9. 현재 이미지가 마지막 복제본이면 전환이 제거되고 카운터는 마지막에서 두 번째 이미지 위치로 설정됩니다.

10. 현재 이미지가 첫 번째 복제본이면 전환이 제거되고 카운터가 마지막 이미지 위치로 설정됩니다.

위 자바스크립트 코드를 참고하여 다양한 디자인의 다른 캐러셀을 제작할 수 있습니다.

✅ 결과물