🖼️ JavaScript Project: Image Slider

Let's build a simple and responsive image slider (carousel) using plain JavaScript and a bit of CSS. This project teaches DOM manipulation, event handling, and working with dynamic content.

📦 HTML Structure

<div class="slider-container">
  <div class="slides">
    <img src="img1.jpg" class="slide active">
    <img src="img2.jpg" class="slide">
    <img src="img3.jpg" class="slide">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

🎨 CSS Styles

.slider-container {
  position: relative;
  max-width: 700px;
  margin: auto;
  overflow: hidden;
}
.slides img {
  width: 100%;
  display: none;
}
.slide.active {
  display: block;
}
button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
}
.prev { left: 0; }
.next { right: 0; }

⚙️ JavaScript Functionality

const slides = document.querySelectorAll(".slide");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");

let currentSlide = 0;

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.remove("active");
    if (i === index) slide.classList.add("active");
  });
}

nextBtn.addEventListener("click", () => {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
});

prevBtn.addEventListener("click", () => {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
});

// Auto Slide (Optional)
setInterval(() => {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}, 5000);

showSlide(currentSlide);

✨ Features to Add

• Auto-play toggle
• Dots navigation
• Keyboard navigation support
• Swipe support for mobile (touch events)