[javascript] 이미지 슬라이더에 화면에 나타나는 이미지 수 조절하기

12 Dec 2023

javascript

이미지 슬라이더 생성

우선, HTML과 CSS를 사용하여 기본 이미지 슬라이더를 생성합니다. 아래는 간단한 이미지 슬라이더의 예시입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>이미지 슬라이더</title>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <img src="image1.jpg" alt="이미지 1">
      <img src="image2.jpg" alt="이미지 2">
      <img src="image3.jpg" alt="이미지 3">
      <!-- 추가 이미지 -->
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

/* styles.css */
.slider {
  overflow: hidden;
}
.slides {
  display: flex; /* 이미지들을 가로로 배치하기 위해 Flexbox를 사용합니다. */
  transition: 0.5s; /* 슬라이드 전환 시간을 설정합니다. */
}

JavaScript로 이미지 수 조절

JavaScript를 사용하여 슬라이더의 이미지 수를 조절할 수 있습니다. 예를 들어, 특정 버튼을 클릭하면 화면에 보이는 이미지 수를 변경할 수 있습니다.

// script.js
const slides = document.querySelector('.slides');
const slideCount = slides.childElementCount;

function updateSlideCount(newCount) {
  slides.style.width = `${100 * newCount}%`;
  slides.style.transform = `translateX(-${(100 / newCount)}%)`;
}

// 예시: 버튼 클릭 시 2개의 이미지 보이도록 설정
document.querySelector('.btn-2').addEventListener('click', () => {
  updateSlideCount(2);
});

// 예시: 버튼 클릭 시 3개의 이미지 보이도록 설정
document.querySelector('.btn-3').addEventListener('click', () => {
  updateSlideCount(3);
});

위의 JavaScript 코드는 .btn-2와 .btn-3 클래스가 지정된 버튼을 클릭했을 때 updateSlideCount 함수를 호출하여 보이는 이미지의 수를 조절하는 예시입니다.

이제 이미지 슬라이더를 열어서 버튼을 클릭하여 화면에 보이는 이미지 수를 조절해보세요. 변경된 이미지 수에 따라 슬라이더가 동적으로 조정되는 것을 확인할 수 있을 것입니다.

이렇게 함으로써 JavaScript를 사용하여 이미지 슬라이더에 화면에 나타나는 이미지 수를 조절하는 방법을 익히게 되었습니다.

이 글은 다음 자료를 참고하였습니다: