[javascript] 이미지 슬라이더에 이미지 회전 애니메이션 추가하기

12 Dec 2023

javascript

이미지 슬라이더에 이미지를 회전시키는 애니메이션을 추가하는 방법에 대해 알아보겠습니다.

1. HTML 구조 만들기

먼저, 이미지 슬라이더를 구현하기 위한 HTML 구조를 만듭니다. 이미지 슬라이더를 나타낼 div 요소를 생성하고, 각 이미지는 img 요소로 추가합니다.

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- 추가 이미지 -->
</div>

2. CSS로 애니메이션 추가하기

다음으로, CSS를 사용하여 이미지 회전 애니메이션을 추가합니다. 아래는 예제 CSS 코드입니다.

.slider img {
  transition: transform 0.5s ease;
}

.slider img:hover {
  transform: rotate(360deg);
}

3. JavaScript를 활용하여 슬라이더 제어하기

이미지 슬라이더를 자동으로 전환하고 사용자 상호작용을 추가하기 위해 JavaScript를 사용할 수 있습니다. 예를 들어, 아래와 같이 JavaScript를 사용하여 이미지를 자동으로 전환하고 사용자가 슬라이더를 제어할 수 있도록 할 수 있습니다.

let currentSlide = 0;
const slides = document.querySelectorAll('.slider img');
const slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
  slides[currentSlide].style.opacity = 0;
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.opacity = 1;
}

위의 코드에서는 2초마다 이미지가 전환되도록 하고, 사용자가 슬라이더를 제어할 수 있도록 nextSlide 함수를 추가하여 이미지를 전환합니다.

결론

이제 이미지 슬라이더에 이미지 회전 애니메이션을 추가하는 방법에 대해 간략히 살펴보았습니다. 이를 응용하여 좀 더 다양한 이미지 슬라이더를 제작할 수 있을 것입니다.

참고문헌: