Step-by-Step: Create a Simple JavaScript Image Slider

Every client, boss, or imaginary website visitor eventually says the same thing:

“Can we have an image slider here?”

And instead of screaming into your keyboard, you can just… build one. From scratch. With vanilla JavaScript. No jQuery. No bloat. No weird plugin with 40 settings you’ll never use.

Here’s how to do it.

🧱 Step 1: The Basic HTML Structure

We’ll keep it clean and minimal—like your hopes after debugging CSS for 3 hours.

<div class="slider">
  <img src="image1.jpg" class="slide active">
  <img src="image2.jpg" class="slide">
  <img src="image3.jpg" class="slide">

  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

Each image has the class .slide, and only one should be visible at a time (thanks to a clever class we’ll control with JavaScript). The arrows are simple Unicode characters. Easy, elegant, and 0% annoying carousel libraries.

🎨 Step 2: Styling with CSS

You want the images to stack and hide like secrets in your browser history.

.slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  overflow: hidden;
  margin: auto;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

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

button.prev { left: 10px; }
button.next { right: 10px; }

We’re doing the good kind of hiding here: hiding all the slides and only showing the one we want.

💻 Step 3: JavaScript to Control the Show

Here’s the magic. No jQuery, no dependencies, no sadness (well, minimal sadness).

const slides = document.querySelectorAll('.slide');
let current = 0;

document.querySelector('.next').addEventListener('click', () => {
  slides[current].classList.remove('active');
  current = (current + 1) % slides.length;
  slides[current].classList.add('active');
});

document.querySelector('.prev').addEventListener('click', () => {
  slides[current].classList.remove('active');
  current = (current - 1 + slides.length) % slides.length;
  slides[current].classList.add('active');
});

What this does:

• Removes .active from the current image
• Updates the index (either forward or backward)
• Adds .active to the new current image

It’s like a slideshow, but without the awkward PowerPoint transitions.

⏱️ Optional: Auto Slide

Feeling fancy? Want it to change automatically like a desperate Tinder user? Add this:

setInterval(() => {
  document.querySelector('.next').click();
}, 3000);

This will auto-trigger the “next” button every 3 seconds. Lazy coding at its finest.

📸 Final Thoughts

You now have a fully working, super lightweight image slider with zero dependencies. You didn’t need a plugin. You didn’t need to npm install something ridiculous. You just needed you… and me. Mostly me.

So go ahead—add your images, tweak the CSS, and act like you always knew how to do this. I won’t tell.