JavaScript Image Slideshow with Previous and Next Buttons

A slideshow stores image URLs in an array, displays one image at a time, and changes the current array index when the visitor chooses Previous or Next. The next image can also be preloaded so it is ready before navigation.

const images = ['images/help.jpg', 'images/help2.jpg', 'images/correct.jpg'];
let current = 0;
slide.src = images[current];

Table of Contents

Working slideshow
Store image URLs
Previous and Next navigation
Preload the next image
First and last slide
Complete working source

Working slideshow Top ↑

1 / 4

Store image URLs in an array Top ↑

The original tutorial stored only the image addresses in the array, not the image data itself. That remains the correct mental model.

const images = [
  'images/help.jpg',
  'images/help2.jpg',
  'images/correct.jpg',
  'images/wrong.jpg'
];

See the related image loading and preloading tutorial.

The original slideshow passed either +1 or -1 to a function. The same idea is retained, but modern code can make the state change explicit and then call one render function.

previous.addEventListener('click', () => {
  current -= 1;
  render();
});

next.addEventListener('click', () => {
  current += 1;
  render();
});

Preload the next image Top ↑

The original download() function created an Image object and assigned the next URL to its src. That technique is retained with local scope and a boundary check.

function preload(index) {
  if (index >= 0 && index < images.length) {
    const preloader = new Image();
    preloader.src = images[index];
  }
}

Disable navigation at the first and last slide Top ↑

The old page hid the buttons using style.visibility. A native disabled button communicates the unavailable action to both sighted and assistive-technology users.

previous.disabled = current === 0;
next.disabled = current === images.length - 1;

Complete working source Top ↑

The original page provided a full copyable slideshow page. That facility is preserved below with modern event handling and local example images.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript image slideshow</title>
</head>
<body>
  <img id="slide" src="images/help.jpg" alt="Slideshow image 1">
  <button type="button" id="prev">&lt;&lt;</button>
  <span id="status" aria-live="polite"></span>
  <button type="button" id="next">&gt;&gt;</button>

  <script>
    const images = ['images/help.jpg', 'images/help2.jpg', 'images/correct.jpg', 'images/wrong.jpg'];
    const slide = document.getElementById('slide');
    const previous = document.getElementById('prev');
    const next = document.getElementById('next');
    const status = document.getElementById('status');
    let current = 0;

    function preload(index) {
      if (index >= 0 && index < images.length) {
        const preloader = new Image();
        preloader.src = images[index];
      }
    }

    function render() {
      slide.src = images[current];
      slide.alt = `Slideshow image ${current + 1}`;
      previous.disabled = current === 0;
      next.disabled = current === images.length - 1;
      status.textContent = `${current + 1} / ${images.length}`;
      preload(current + 1);
    }

    previous.addEventListener('click', () => { current -= 1; render(); });
    next.addEventListener('click', () => { current += 1; render(); });
    render();
  </script>
</body>
</html>

Image Object Automatic image rotator

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

JavaScript Image Slideshow Using the Image Object