[javascript] 이미지 슬라이더에 이미지 리사이즈 기능 추가하기

12 Dec 2023

javascript

이미지 슬라이더는 웹사이트의 시각적인 매력을 높이고 사용자 경험을 개선하는 데 유용합니다. 이미지 슬라이더에 이미지의 크기를 동적으로 조절하여 다양한 디바이스에서 보다 효과적으로 표시되도록 하는 것이 중요합니다. 이번 포스트에서는 JavaScript를 사용하여 이미지 슬라이더에 이미지 리사이즈 기능을 추가하는 방법을 살펴보겠습니다.

1. HTML 구조 설정

우선, 이미지 슬라이더를 감싸는 부모 요소를 만들고 그 안에 이미지 엘리먼트를 추가합니다.

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

2. CSS 스타일링

이미지 슬라이더의 부모 요소에 대한 CSS를 추가하여 이미지를 원하는 크기로 조절합니다.

.slider-container {
  width: 100%;
  height: 300px; /* 원하는 높이로 설정 */
  overflow: hidden;
}

.slider-image {
  width: 100%;
  height: auto;
  display: block;
}

3. JavaScript를 사용한 이미지 리사이즈

JavaScript를 사용하여 이미지의 크기를 조절합니다. 예를 들어, 윈도우 창의 크기가 조절될 때마다 이미지의 크기를 동적으로 조절하도록 이벤트 리스너를 추가할 수 있습니다.

window.addEventListener('resize', function() {
  let sliderImages = document.querySelectorAll('.slider-image');
  let sliderContainerWidth = document.querySelector('.slider-container').clientWidth;

  sliderImages.forEach(function(img) {
    img.style.height = 'auto';
    img.style.width = sliderContainerWidth + 'px';
  });
});

이제 이미지 슬라이더에 이미지 리사이즈 기능이 추가되었습니다. 사용자가 브라우저 창의 크기를 변경할 때마다 이미지가 동적으로 조절되어 다양한 화면 크기에 맞게 효과적으로 표시될 것입니다.

이번 튜토리얼은 JavaScript를 사용하여 이미지 슬라이더에 이미지 리사이즈 기능을 추가하는 방법을 안내했습니다. 이렇게 함으로써 사용자들은 다양한 디바이스에서 웹사이트를 더욱 편리하게 이용할 수 있게 될 것입니다.

참고: