이번 블로그 포스트에서는 자바스크립트를 사용하여 사진 슬라이드 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정하기

먼저, 사진 슬라이드를 표시할 HTML 구조를 설정해야 합니다. 다음과 같이 간단한 구조를 만들어보겠습니다.

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

위의 코드에서는 slider라는 클래스를 가진 div 요소 안에 슬라이드할 사진들을 img 요소로 배치했습니다. 이 코드는 단순한 예시입니다. 실제로는 사진과 관련된 정보를 더 추가할 수 있습니다.

2. CSS 스타일 설정하기

다음으로, 사진 슬라이드의 모양과 배치를 위해 CSS 스타일을 설정해야 합니다. 예시 코드는 다음과 같습니다.

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

.slider img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
}

.slider img:not(:first-child) {
  transform: translateX(100%);
}

위의 코드에서는 slider 클래스를 가진 div 요소의 크기를 500px로 설정하고, 이미지의 크기를 해당 div 요소에 맞추도록 스타일을 지정했습니다. 또한, 슬라이드 애니메이션 효과를 주기 위해 transition 속성을 사용했습니다. 마지막으로, 첫 번째 이미지를 제외한 이미지들은 translateX(100%) 속성을 적용하여 오른쪽으로 숨깁니다.

3. 자바스크립트로 슬라이드 구현하기

이제 자바스크립트를 사용하여 사진 슬라이드의 동작을 구현해보겠습니다. 다음과 같이 자바스크립트 코드를 작성해주세요.

const slider = document.querySelector('.slider');
let currentPosition = 0;

function slide() {
  const slides = slider.querySelectorAll('img');
  currentPosition = (currentPosition + 1) % slides.length;

  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${index === currentPosition ? '0%' : '100%'})`;
  });

  setTimeout(slide, 2000); // 2초마다 슬라이드
}

slide(); // 슬라이드 시작

위의 코드에서는 slider 클래스를 가진 div 요소를 찾고, 현재 슬라이드의 위치를 나타내는 currentPosition 변수를 초기화합니다. 그리고 slide 함수를 정의하여 슬라이드를 처리하고, 2초마다 slide 함수를 재귀적으로 호출합니다. 이렇게 하면 사진 슬라이드가 자동으로 이동하게 됩니다.

마치며

이제 자바스크립트를 사용하여 사진 슬라이드 애니메이션을 구현하는 방법에 대해 알아보았습니다. 위의 코드를 참고하여 원하는 기능을 추가하거나 스타일링을 변경할 수 있습니다. 자세한 내용은 MDN Web Docs에서 확인할 수 있습니다. 즐거운 코딩되시기 바랍니다!

#javascript #이미지슬라이드