JavascriptHow-ToBeginner · 3 min read

How to Create Image Slider in JavaScript: Simple Step-by-Step Guide

To create an image slider in JavaScript, use an array of image URLs and display one image at a time inside an img element. Use JavaScript functions to change the image source on button clicks or automatically with setInterval.

📐

Syntax

An image slider typically uses an img tag to show images and JavaScript to change the src attribute. You keep track of the current image index and update it to show the next or previous image.

Key parts:

images: an array holding image URLs.
currentIndex: tracks which image is shown.
showImage(index): function to update the displayed image.
next() and prev(): functions to move forward or backward.

javascript

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;

function showImage(index) {
  const imgElement = document.getElementById('slider-image');
  imgElement.src = images[index];
}

function next() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

function prev() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
}

💻

Example

This example shows a simple image slider with "Previous" and "Next" buttons. Clicking the buttons changes the displayed image.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Image Slider</title>
  <style>
    #slider-container {
      max-width: 400px;
      margin: auto;
      text-align: center;
    }
    #slider-image {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    button {
      margin: 10px 5px;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="slider-container">
    <img id="slider-image" src="https://via.placeholder.com/400x200?text=Image+1" alt="Image Slider" />
    <br />
    <button id="prev-btn">Previous</button>
    <button id="next-btn">Next</button>
  </div>

  <script>
    const images = [
      'https://via.placeholder.com/400x200?text=Image+1',
      'https://via.placeholder.com/400x200?text=Image+2',
      'https://via.placeholder.com/400x200?text=Image+3'
    ];
    let currentIndex = 0;

    function showImage(index) {
      const imgElement = document.getElementById('slider-image');
      imgElement.src = images[index];
    }

    document.getElementById('next-btn').addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % images.length;
      showImage(currentIndex);
    });

    document.getElementById('prev-btn').addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + images.length) % images.length;
      showImage(currentIndex);
    });
  </script>
</body>
</html>

Output

A webpage showing a 400x200 placeholder image labeled "Image 1" with two buttons below labeled "Previous" and "Next". Clicking "Next" cycles to "Image 2" and "Image 3", then back to "Image 1". Clicking "Previous" cycles backward similarly.

⚠️

Common Pitfalls

Common mistakes when creating image sliders include:

Not updating the src attribute correctly, so the image does not change.
Forgetting to handle the index wrap-around, causing errors or blank images.
Not waiting for the DOM to load before accessing elements, causing null errors.
Using incorrect event listeners or missing them entirely.

Always test your slider buttons and image changes carefully.

javascript

/* Wrong: No wrap-around, index can go out of bounds */
function nextWrong() {
  currentIndex += 1;
  showImage(currentIndex); // May cause error if currentIndex >= images.length
}

/* Right: Wrap-around with modulo operator */
function nextRight() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

📊

Quick Reference

Tips for building image sliders:

Use an array to store image URLs.
Keep track of the current image index.
Update the src attribute of the img element to change images.
Use modulo (%) to cycle through images smoothly.
Add buttons with event listeners for user control.
Ensure images are preloaded or use placeholders to avoid flicker.

✅

Key Takeaways

Use an array of image URLs and update the img element's src to change images.

Handle index wrap-around with modulo (%) to cycle images smoothly.

Add buttons with event listeners to let users navigate the slider.

Always ensure the DOM is loaded before accessing elements.

Test your slider to avoid broken images or errors.