이미지 갤러리에 슬라이더 기능을 추가하면 사용자가 좌우로 슬라이드하여 다양한 이미지를 볼 수 있습니다. 자바스크립트를 사용하면 이 기능을 구현할 수 있습니다. 이 튜토리얼에서는 CSS Grid를 사용하여 이미지 갤러리를 만들고, 자바스크립트를 사용하여 슬라이더 기능을 추가하는 방법을 알아보겠습니다.

CSS Grid를 사용한 이미지 갤러리 만들기

먼저, HTML 파일에 이미지 갤러리를 구현하기 위해 CSS Grid를 사용하겠습니다. 다음은 간단한 구조의 HTML 코드입니다.

<div class="gallery">
  <div class="image">이미지 1</div>
  <div class="image">이미지 2</div>
  <div class="image">이미지 3</div>
  <div class="image">이미지 4</div>
  <div class="image">이미지 5</div>
  <div class="image">이미지 6</div>
  <div class="image">이미지 7</div>
  <div class="image">이미지 8</div>
  <div class="image">이미지 9</div>
</div>

CSS 파일에 다음과 같은 스타일을 추가하여 CSS Grid 레이아웃을 설정할 수 있습니다.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.image {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

이 코드는 3개의 열로 구성된 CSS Grid를 생성하고, 이미지 갤러리를 보여줍니다. 이미지는 .image 클래스로 표시되며, 간단히 회색으로 배경색이 지정되어 있습니다.

슬라이더 기능 추가하기

이제 자바스크립트를 사용하여 이미지 갤러리에 슬라이더 기능을 추가하겠습니다. 가장 간단한 방법은 transform 속성을 사용하여 이미지 갤러리를 왼쪽이나 오른쪽으로 이동하는 것입니다.

const gallery = document.querySelector('.gallery');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

let currentPosition = 0;

prevButton.addEventListener('click', () => {
  currentPosition -= 1;
  gallery.style.transform = `translateX(${currentPosition * -100}%)`;
});

nextButton.addEventListener('click', () => {
  currentPosition += 1;
  gallery.style.transform = `translateX(${currentPosition * -100}%)`;
});

위의 자바스크립트 코드는 이전 버튼과 다음 버튼에 클릭 이벤트를 추가하여, 버튼을 클릭할 때마다 currentPosition 변수를 갱신하고 translateX 값을 조정하여 이미지 갤러리를 슬라이드하는 역할을 합니다. 이 코드는 순환 슬라이더로 구현되지 않았으므로, 처음 이미지에서 끝 이미지로 이동할 경우 다음 버튼을 클릭해야 합니다.

마무리

이제 자바스크립트를 사용하여 CSS Grid를 활용한 이미지 갤러리에 슬라이더 기능을 추가하는 방법을 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과나 사용자 인터페이스를 개선할 수 있습니다. 이 간단한 예제를 활용하여 웹 앱에서 구현하고자 하는 동적인 요소를 추가해보세요.

#javascript #cssgrid #이미지갤러리 #슬라이더