Promise를 활용한 이미지 슬라이더 구현

13 Sep 2023

Promise

이미지 슬라이더는 웹 페이지에서 많이 사용되는 기능 중 하나입니다. 사용자에게 여러 개의 이미지를 보여주고 자동으로 슬라이드되는 기능을 제공합니다. 이번에는 Promise를 활용하여 이미지 슬라이더를 구현해보도록 하겠습니다.

HTML 구조

먼저 이미지 슬라이더를 위한 HTML 구조를 작성해야 합니다. 간단한 슬라이더를 구현하기 위해 <div> 요소 안에 이미지들을 넣고, 좌우로 슬라이드할 수 있는 버튼을 추가하겠습니다.

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">

  <button class="prev-button">←</button>
  <button class="next-button">→</button>
</div>

CSS 스타일링

이미지 슬라이더를 꾸미기 위해 CSS 스타일을 적용해보겠습니다.

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev-button,
.next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

JavaScript 구현

이제 JavaScript를 통해 이미지 슬라이더를 동작하도록 구현해보겠습니다. Promise를 활용하여 이미지를 불러온 후 슬라이더를 초기화하는 로직을 작성하겠습니다.

const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
const prevButton = slider.querySelector('.prev-button');
const nextButton = slider.querySelector('.next-button');
let currentIndex = 0;

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = src;
    img.onload = resolve(img);
    img.onerror = reject(new Error(`Failed to load image: ${src}`));
  });
}

function showImage(index) {
  images.forEach((image, i) => {
    image.style.transform = `translateX(${100 * (i - index)}%)`;
  });
}

function prevSlide() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

Promise.all(Array.from(images).map(img => loadImage(img.getAttribute('src'))))
  .then(() => showImage(currentIndex))
  .catch(err => console.error(err));

prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);

위의 코드는 다음과 같은 동작을 수행합니다.

loadImage 함수를 통해 이미지를 미리 로드합니다.
Promise.all을 사용하여 모든 이미지의 로드가 완료될 때까지 기다립니다.
이미지를 모두 로드한 후 초기 이미지를 표시합니다.
이전 버튼과 다음 버튼에 각각 prevSlide와 nextSlide 함수를 연결하여 슬라이드 기능을 구현합니다.

위의 코드를 웹 페이지에 추가하고 실행하면 Promise를 활용한 이미지 슬라이더가 구현됩니다.

#Promise #이미지슬라이더