[javascript] 자바스크립트로 이미지 슬라이더 만들기

12 Dec 2023

javascript

이미지 슬라이더는 웹사이트에서 이미지를 전환하거나 슬라이드되게 보여주는데 유용합니다. 이 포스트에서는 HTML, CSS 그리고 자바스크립트를 사용하여 간단한 이미지 슬라이더를 만드는 방법에 대해 알아보겠습니다.

1. HTML 구조 만들기

먼저, 이미지 슬라이더를 위한 HTML 구조를 만들어 보겠습니다.

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

2. CSS 스타일 적용하기

다음으로, 이미지 슬라이더에 스타일을 적용해 보겠습니다.

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
}

.slides img {
  width: 100%;
  flex: 1;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  z-index: 2;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

3. 자바스크립트로 슬라이더 기능 추가하기

마지막으로, 자바스크립트로 이미지 슬라이더의 동작을 추가해 보겠습니다.

let slideIndex = 0;
showSlides();

function showSlides() {
  let slides = document.querySelectorAll(".slides img");
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) { slideIndex = 1 }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 2000); // 2초마다 이미지 전환
}

이제 당신은 간단한 자바스크립트 이미지 슬라이더를 만들었습니다! 이제 웹사이트에 적용해 보세요.

참고 자료: