자바스크립트를 사용하여 CSS Grid를 활용한 이미지 갤러리에 슬라이드 쇼 기능 추가하기

18 Sep 2023

이미지 갤러리에 슬라이드 쇼 기능을 추가하는 것은 사용자에게 좀 더 흥미로운 경험을 제공하는 데 도움이 됩니다. 자바스크립트를 사용하여 CSS Grid를 활용한 이미지 갤러리에 슬라이드 쇼 기능을 추가하는 방법에 대해 알아보겠습니다.

HTML 구조

먼저 HTML 구조를 설정해야 합니다. CSS Grid를 사용하여 이미지를 효과적으로 배치하고 슬라이드 쇼를 제공하기 위해 다음과 같은 구조를 사용할 수 있습니다.

<div class="gallery">
  <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 스타일링

CSS를 사용하여 갤러리와 이미지 슬라이드를 스타일링할 수 있습니다. 다음은 기본적인 CSS 스타일을 적용한 예시입니다.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.slides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  position: relative;
}

.slides img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.button {
  width: 60px;
  height: 40px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.prev {
  grid-column: 1;
  grid-row: 2;
}

.next {
  grid-column: 3;
  grid-row: 2;
}

자바스크립트 코드

이제 자바스크립트를 사용하여 슬라이드 쇼 기능을 추가할 차례입니다. 다음은 자바스크립트 코드 예제입니다.

document.addEventListener("DOMContentLoaded", function() {
  const slides = document.querySelector(".slides");
  const prevBtn = document.querySelector(".prev");
  const nextBtn = document.querySelector(".next");
  const imageWidth = slides.offsetWidth;

  let currentImageIndex = 0;

  prevBtn.addEventListener("click", function() {
    if (currentImageIndex > 0) {
      currentImageIndex--;
      slides.style.transform = `translateX(-${currentImageIndex * imageWidth}px)`;
    }
  });

  nextBtn.addEventListener("click", function() {
    if (currentImageIndex < slides.children.length - 1) {
      currentImageIndex++;
      slides.style.transform = `translateX(-${currentImageIndex * imageWidth}px)`;
    }
  });
});

위의 코드는 이전 버튼과 다음 버튼 클릭 시 현재 이미지의 인덱스를 증가/감소시키고, 슬라이드를 왼쪽/오른쪽으로 이동시키는 기능을 구현합니다.

마무리

이제 이미지 갤러리에 슬라이드 쇼 기능이 추가된 예쁜 갤러리를 만들어보았습니다. 사용자가 자동으로 전환되는 이미지 슬라이드 쇼를 즐길 수 있게 되었습니다.

#JavaScript #CSSGrid #이미지갤러리 #슬라이드쇼