Image Slider in JavaScript

Features:

Auto and manual image sliding
Next and Previous buttons
Clean and responsive design
Simple and beginner-friendly

Folder Structure

image-slider/
├── index.html
├── style.css
└── script.js

HTML: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Image Slider</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="slider-container">
<div class="slider">
<img src="https://via.placeholder.com/600x300?text=Image+1" class="slide active" />
<img src="https://via.placeholder.com/600x300?text=Image+2" class="slide" />
<img src="https://via.placeholder.com/600x300?text=Image+3" class="slide" />
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
</div>

<script src="script.js"></script>
</body>
</html>

CSS: style.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.slider-container {
  position: relative;
  width: 600px;
  max-width: 90%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  display: none;
}

.slide.active {
  display: block;
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

JavaScript: script.js

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

let currentIndex = 0;

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

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

function prevSlide() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  showSlide(currentIndex);
}

// Event Listeners
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

// Auto Slide
setInterval(nextSlide, 3000); // every 3 seconds