[javascript] 이미지 슬라이더에 이미지 배경색 변경 기능 추가하기

12 Dec 2023

javascript

이미지 슬라이더에 이미지 배경색 변경 기능을 추가하는 방법을 살펴보겠습니다.

HTML 구조

먼저 HTML 구조를 설정해야 합니다. 이미지 슬라이더를 담을 div 요소와 이미지들을 담을 div나 img 요소를 만들어야 합니다.

<div class="slider">
  <div class="slide" style="background-image: url('image1.jpg')"></div>
  <div class="slide" style="background-image: url('image2.jpg')"></div>
  <div class="slide" style="background-image: url('image3.jpg')"></div>
</div>

CSS 스타일링

다음으로 CSS를 사용하여 이미지 슬라이드와 배경색을 스타일링할 수 있습니다.

.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: opacity 0.5s;
}

JavaScript 추가

자바스크립트를 사용하여 슬라이드가 변경될 때 배경색을 변경할 수 있습니다.

const slides = document.querySelectorAll('.slide');

slides.forEach(slide => {
  slide.addEventListener('transitionend', () => {
    const currentSlide = document.querySelector('.slide.active');
    const bgColor = window.getComputedStyle(currentSlide).getPropertyValue('background-color');
    document.body.style.backgroundColor = bgColor;
  });
});

이제 이미지 슬라이더에 이미지 배경색 변경 기능이 추가되었습니다.

참고 자료

Note: 위 코드를 사용하려면, 해당 이미지 파일이 프로젝트 폴더 내에 존재하여야 합니다.