Promise를 활용한 앨범 슬라이더 기능 구현

13 Sep 2023

Promise

앨범 슬라이더는 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 슬라이더를 드래그하여 다른 앨범 사진을 볼 수 있도록 도와주는 역할을 합니다. 이번 글에서는 Promise를 활용하여 앨범 슬라이더 기능을 구현하는 방법을 알아보겠습니다.

1. HTML 구조

먼저, HTML 구조를 작성해야 합니다. 필요한 요소는 앨범 이미지를 보여주는 컨테이너와 슬라이더로 사용할 버튼입니다.

<div class="album-container">
  <img src="album1.jpg" alt="Album 1 Image">
  <img src="album2.jpg" alt="Album 2 Image">
  <img src="album3.jpg" alt="Album 3 Image">
</div>

<button id="prev-btn">이전</button>
<button id="next-btn">다음</button>

2. CSS 스타일링

슬라이더를 보기 좋게 스타일링하기 위해 CSS를 추가합니다. 아래는 예시로 간략하게 스타일링한 코드입니다.

<style>
.album-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.album-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.album-container img.active {
  opacity: 1;
}

button {
  margin-top: 10px;
}
</style>

3. 앨범 슬라이더 기능 구현

이제 JavaScript를 사용하여 앨범 슬라이더 기능을 구현합니다. Promise를 활용하여 비동기 작업을 처리하고 앨범 사진 간의 전환을 담당하는 함수를 작성합니다.

const albumContainer = document.querySelector('.album-container');
const images = albumContainer.querySelectorAll('img');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
let currentIndex = 0;

function fadeOut(element) {
  return new Promise((resolve) => {
    element.style.opacity = '0';
    element.addEventListener('transitionend', resolve, { once: true });
  });
}

function fadeIn(element) {
  return new Promise((resolve) => {
    element.style.opacity = '1';
    element.addEventListener('transitionend', resolve, { once: true });
  });
}

async function showNextImage() {
  const currentImage = images[currentIndex];
  const nextIndex = (currentIndex + 1) % images.length;
  const nextImage = images[nextIndex];

  await fadeOut(currentImage);
  currentImage.classList.remove('active');
  nextImage.classList.add('active');
  await fadeIn(nextImage);

  currentIndex = nextIndex;
}

async function showPrevImage() {
  const currentImage = images[currentIndex];
  const prevIndex = (currentIndex - 1 + images.length) % images.length;
  const prevImage = images[prevIndex];

  await fadeOut(currentImage);
  currentImage.classList.remove('active');
  prevImage.classList.add('active');
  await fadeIn(prevImage);

  currentIndex = prevIndex;
}

nextBtn.addEventListener('click', showNextImage);
prevBtn.addEventListener('click', showPrevImage);

images[currentIndex].classList.add('active');

위의 코드에서는 fadeOut와 fadeIn 함수를 각각 이전 이미지와 다음 이미지의 페이드 아웃 및 페이드 인 효과를 위해 작성하였습니다. showNextImage와 showPrevImage 함수는 각각 다음 이미지와 이전 이미지를 보여주는 역할을 합니다. Promise를 활용하여 비동기 작업을 순차적으로 수행하고, 현재 활성화된 이미지와 투명도 설정을 통해 전환 효과를 구현합니다.

슬라이더를 사용할 때는 nextBtn과 prevBtn 버튼에 각각 showNextImage와 showPrevImage 함수를 연결해주어야 합니다.

4. 마무리

위의 코드를 사용하여 앨범 슬라이더 기능을 구현할 수 있습니다. 이 코드를 활용하여 슬라이더의 디자인과 동작을 더욱 개선하거나, 다양한 방식으로 활용할 수도 있습니다. 향후 웹 프로젝트에서 앨범 슬라이더가 필요한 경우에는 위의 코드를 참고하여 구현해보세요.

#Promise #앨범슬라이더