How To Create a Slider

Learn how to build a slider (slideshow) that moves between slides with buttons, dots and a timer.

Step 1: The HTML

We use coloured slides with text instead of photos. A real site would put an <img> inside each slide in exactly the same way.

Example

html

<div class="slider">
  <div class="slide active" style="background:#059669;">Summer admissions open</div>
  <div class="slide" style="background:#2563eb;">New AI course</div>
  <div class="slide" style="background:#db2777;">Free career guidance</div>
  <button class="prev" id="prev">&#10094;</button>
  <button class="next" id="next">&#10095;</button>
</div>
<div class="dots" id="dots"></div>

Step 2: The CSS

All slides sit on top of each other. Only the active one is visible, and opacity with a transition makes them fade.

Example

css

.slider { position: relative; height: 220px; overflow: hidden; border-radius: 10px; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 26px; opacity: 0; transition: opacity 0.6s; }
.slide.active { opacity: 1; }

Step 3: The JavaScript

One function, showSlide(n), does all the work. The buttons, dots and timer just call it with a new number.

Example

javascript

let current = 0;
function showSlide(n) {
  slides[current].classList.remove("active");
  dots[current].classList.remove("active");
  current = (n + slides.length) % slides.length;
  slides[current].classList.add("active");
  dots[current].classList.add("active");
}

The % (remainder) trick makes the slider wrap around: after the last slide comes the first, and before the first comes the last.

The Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; max-width: 700px; margin: auto; }
  .slider { position: relative; height: 220px; overflow: hidden; border-radius: 10px; }
  .slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 26px; text-align: center; padding: 0 50px; opacity: 0; transition: opacity 0.6s; }
  .slide.active { opacity: 1; }
  .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: white; border: none; font-size: 22px; padding: 10px 14px; cursor: pointer; z-index: 2; }
  .prev { left: 0; border-radius: 0 6px 6px 0; }
  .next { right: 0; border-radius: 6px 0 0 6px; }
  .dots { text-align: center; margin-top: 10px; }
  .dot { display: inline-block; width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: #ccc; cursor: pointer; }
  .dot.active { background: #059669; }
</style>
</head>
<body>

<div class="slider">
  <div class="slide active" style="background:#059669;">Summer admissions open</div>
  <div class="slide" style="background:#2563eb;">New AI course</div>
  <div class="slide" style="background:#db2777;">Free career guidance</div>
  <button class="prev" id="prev" aria-label="Previous slide">&#10094;</button>
  <button class="next" id="next" aria-label="Next slide">&#10095;</button>
</div>
<div class="dots" id="dots"></div>

<script>
  const slides = document.querySelectorAll(".slide");
  const dotsBox = document.getElementById("dots");
  let current = 0;

  slides.forEach(function (s, i) {
    const dot = document.createElement("span");
    dot.className = "dot" + (i === 0 ? " active" : "");
    dot.addEventListener("click", function () { showSlide(i); restart(); });
    dotsBox.appendChild(dot);
  });
  const dots = document.querySelectorAll(".dot");

  function showSlide(n) {
    slides[current].classList.remove("active");
    dots[current].classList.remove("active");
    current = (n + slides.length) % slides.length;
    slides[current].classList.add("active");
    dots[current].classList.add("active");
  }

  document.getElementById("next").onclick = function () { showSlide(current + 1); restart(); };
  document.getElementById("prev").onclick = function () { showSlide(current - 1); restart(); };

  let timer = setInterval(function () { showSlide(current + 1); }, 4000);
  function restart() {
    clearInterval(timer);
    timer = setInterval(function () { showSlide(current + 1); }, 4000);
  }
</script>

</body>
</html>

Try it Yourself »

How It Works

Part	Job
`createElement("span")`	Builds one dot per slide automatically
`(n + length) % length`	Wraps from last to first and first to last
`setInterval(..., 4000)`	Moves to the next slide every 4 seconds
`restart()`	Resets the timer after a manual click

Do not make slides change too fast. Four to six seconds gives people time to read, and the buttons let them control it.

Exercise

There are 3 slides and current is 2 (the last one). What does (2 + 1 + 3) % 3 give for the next slide?

0, the first slide326