Simple Image Slideshow In HTML Javascript (No Library Dependency)

Once upon a time, a student loaded an entire framework and “widget module” to add a slideshow to a simple page. She then grumbled something about “very difficult” and “have to learn all kinds of libraries”… Master Coffee just shake head and say “I can do it in less than 50 lines of Javascript code”. So here it is, a simple “no third-party library” slideshow. Let’s go!

 

CODE DOWNLOAD

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

IMAGE SLIDESHOW DEMO

This slideshow is responsive. Go ahead – Resize your window and see how it fits.

 

 

PART 1) THE HTML

<!-- (PART A) EMPTY DIV FOR SLIDESHOW -->
<div id="demo"></div>

<!-- (PART B) ATTACH SLIDESHOW -->
<script>
slider(document.getElementById("demo"), [
  ["slide-1.webp", "Hot Coffee"],
  ["slide-2.webp", "Iced Coffee"],
  ["slide-3.webp", "Canned Coffee"]
]);
</script>

Here’s a quick TLDR for those who just want to use this as a plugin:

• Load the CSS and JS.
• <div id="demo"> Create an empty container to generate the slideshow.
• Call slider() and pass in 2 parameters – The empty container, and an array of images to display in the slideshow.

 

 

PART 2) THE JAVASCRIPT

function slider (target, images) {
  // (PART A) INITIALIZE SLIDESHOW
  target.current = 0;  // current slide
  target.timer = null; // slides timer
  target.delay = 5000; // slides delay
  target.classList.add("slides");

  // (PART B) DRAW SLIDESHOW
  let ready = () => {
    // (B1) WAIT FOR ALL IMAGES TO LOAD
    target.current++;
    if (target.current < images.length) { return; }

    // (B2) NEXT/LAST SLIDE
    target.scroller = direction => {
      // (B2-1) STOP TIMER
      clearTimeout(target.timer);

      // (B2-2) SHOW NEXT SLIDE
      if (direction) { target.current++; } else { target.current--; }
      if (target.current == -1) { target.current = images.length-1; }
      if (target.current >= images.length) { target.current = 0; }
      for (let [i,img] of Object.entries(images)) {
        img[2].className = i == target.current ? "show" : "" ;
      }

      // (B2-3) START TIMER
      target.timer = setTimeout(() => target.scroller(1), target.delay);
    };
    target.innerHTML = `<div class="last">&lt;</div><div class="next">&gt;</div>`;
    target.querySelector(".last").onclick = () => target.scroller();
    target.querySelector(".next").onclick = () => target.scroller(1);

    // (B3) ATTACH SLIDES
    for (let i of images) { target.appendChild(i[2]); }
    target.scroller(1);
  };

  // (PART C) START PRELOADING IMAGES
  for (let i of images) {
    i[2] = document.createElement("figure");
    i[2].innerHTML = `<img src="${i[0]}" decoding="async"><figcaption>${i[1]}</figcaption>`;
    i[2].querySelector("img").onload = ready;
  }
}

Yes, there is only a single function slider() for the Javascript. It will be easier to trace through in this order:

• (A) target refers to the empty <div>. The first thing we do is to add some “flags and settings” to it.
  • current The current slide that is being displayed.
  • timer Javascript timer object.
  • delay Time to display each slide, in milliseconds.
• (C) Loop through the images and preload all of them asynchronously.
• (B1) Wait for all the images to be fully loaded before building the slideshow.
• (B2) Add last/next buttons to the slideshow. Pretty much increment/decrement current and show the slide accordingly.
• (B3) Complete the slideshow by attaching the actual slides.

 

 

PART 3) THE GENERATED HTML

<div id="demo" class="slides">
  <!-- LAST/NEXT BUTTONS -->
  <div class="last" onclick="scroller()">&lt;</div>
  <div class="next" onclick="scroller(1)">&gt;</div>

  <!-- SLIDES -->
  <figure>
    <img src="IMAGE1.WEBP" decoding="async">
    <figcaption>CAPTION 1</figcaption>
  </figure>
  <figure>
    <img src="IMAGE2.WEBP" decoding="async">
    <figcaption>CAPTION 2</figcaption>
  </figure>
  ...
</div>

This is the “complete slideshow widget” that the Javascript will generate.

 

 

PART 4) THE CSS

/* (PART A) SLIDES CONTAINER */
.slides {
  position: relative;
  max-width: 600px; height: 400px;
}

/* (PART B) SHARED */
.slides figure, .slides figcaption, .slides .last, .slides .next { position: absolute; }
.slides figure, .slides img { width: 100%; height: 100%; }

/* (PART C) SLIDES */
.slides figure {
  top: 0; left: 0;
  padding: 0; margin: 0;
  visibility: hidden; opacity: 0;
  transition: all 0.5s;
}
.slides figure.show {
  visibility: visible; opacity: 1;
}
.slides img {
  object-fit: cover;
}
.slides figcaption {
  bottom: 0; left: 0;
  width: 100%; padding: 10px;
  color: #fff; background: rgba(0, 0, 0, 0.7);
}

/* (PART D) LAST/NEXT BUTTONS */
.slides .last, .slides .next {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; background: rgba(0, 0, 0, 0.7);
  width: 40px; height: 40px; border-radius: 50%;
  z-index: 9; top: 50%; transform: translateY(-50%);
  cursor: pointer;
}
.slides .last { left: 10px; }
.slides .next { right: 10px; }

Some cosmetics for the slideshow. Feel free to style it however you wish.

 

 

THE END – SHOW CONTROLS ON MOUSE HOVER

That’s all for this quick tutorial and sharing. One last “addon” before we end, for those who want to show the controls only on mouse hover:

• Hide them by default – .slides figcaption, .slides .last, .slides .next { display: none; }
• Show only on mouse hover – .slides:hover figcaption, .slides:hover .last, .slides:hover .next { display: block; }