JavaScript로 이미지 슬라이더 만들기

 

 

 

웹사이트에서 자주 볼 수 있는 이미지 슬라이더(캐러셀),
멋진 UI 요소지만 어렵게 느껴지셨나요?

이번 포스팅에서는 jQuery 없이 순수 JavaScript만으로
기초적인 이미지 슬라이더를 만들어보겠습니다.
코딩에 익숙하지 않으셔도 차근차근 따라오시면 완성할 수 있습니다!

---

✅ 완성 모습 미리보기

• 버튼 클릭 시 이미지 전환
• 좌우 화살표 버튼
• 간단한 스타일 적용
• 다음에는 자동 슬라이드까지 추가 가능!

---

🧱 1. HTML 구조 만들기

 

<div class="slider">
  <img src="img1.jpg" class="slide active">
  <img src="img2.jpg" class="slide">
  <img src="img3.jpg" class="slide">
</div>

<div class="controls">
  <button id="prev">← 이전</button>
  <button id="next">다음 →</button>
</div>

📌 설명:

• class="slide": 각각의 슬라이드 이미지
• class="active": 현재 보이는 슬라이드
• id="prev", id="next": 이전/다음 버튼

---

🎨 2. CSS 기본 스타일

 

.slider {
  position: relative;
  width: 600px;
  height: 350px;
  overflow: hidden;
  margin: 20px auto;
}

.slide {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.active {
  display: block;
}

.controls {
  text-align: center;
  margin-top: 10px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
}

💡 팁:

• 슬라이드는 기본 display: none이고, active 클래스가 붙은 이미지만 보여줍니다.

---

💻 3. JavaScript 로직

 

const slides = document.querySelectorAll(".slide");
let index = 0;

function showSlide(i) {
  slides.forEach(slide => slide.classList.remove("active"));
  slides[i].classList.add("active");
}

document.getElementById("next").addEventListener("click", () => {
  index = (index + 1) % slides.length;
  showSlide(index);
});

document.getElementById("prev").addEventListener("click", () => {
  index = (index - 1 + slides.length) % slides.length;
  showSlide(index);
});

📌 설명:

• slides.length 만큼 반복되며 마지막 다음엔 첫 이미지로 돌아갑니다.
• classList.remove/add로 이미지 전환을 처리합니다.

---

🔁 보너스: 자동 슬라이드 추가 방법

 

setInterval(() => {
  index = (index + 1) % slides.length;
  showSlide(index);
}, 4000); // 4초 간격으로 자동 슬라이드

이 코드를 기존 JS 아래에 추가하면 자동으로 슬라이드 전환됩니다.

---

✅ 실전 적용 팁

상황	팁
반응형으로 만들고 싶다면?	width: 100%, max-width, media query 추가
이미지가 많다면?	슬라이드 인디케이터(dot)도 추가 가능
애니메이션 효과?	CSS transition, transform으로 개선 가능