🖼️ Create an Image Slider with Next/Prev Buttons in JavaScript

Image sliders are a great way to showcase multiple images in a limited space. In this tutorial, you will learn how to create a simple image slider with Next and Previous buttons using HTML, CSS, and JavaScript.

This project is perfect for beginners who want to learn how JavaScript interacts with HTML and CSS.

🚀 What You Will Learn

How to structure HTML for an image slider
How to style the slider with CSS
How to use JavaScript to add interactivity (Next/Prev buttons)
How to make the slider functional and clean

🧱 Step 1: Create the HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Image Slider</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="slider-container">
    <button id="prev">❮</button>
    <img id="slider-image" src="image1.jpg" alt="Slider Image">
    <button id="next">❯</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

🔍 Explanation:

slider-container: A wrapper that holds the image and buttons.
img: Displays the current image.
prev and next: Buttons to go to the previous and next images.
JavaScript file script.js is linked at the bottom of the page for interactivity.

🎨 Step 2: Style the Slider with CSS

Create a file named style.css and add the following code:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

.slider-container {
  position: relative;
  max-width: 600px;
  margin: 50px auto;
}

#slider-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

🔍 Explanation:

The container is centered and responsive.
Buttons are positioned on the left and right of the image.
transform: translateY(-50%) centers the button vertically.
Hover effect improves the user experience.

🧠 Step 3: Add JavaScript Logic

Create a file named script.js and add the following code:

// List of image sources
const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

// Get DOM elements
const sliderImage = document.getElementById("slider-image");
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");

// Function to update the image
function updateImage() {
  sliderImage.src = images[currentIndex];
}

// Event listener for Previous button
prevButton.addEventListener("click", () => {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1; // Go to last image
  }
  updateImage();
});

// Event listener for Next button
nextButton.addEventListener("click", () => {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0; // Go back to first image
  }
  updateImage();
});

🔍 Explanation:

images[]: An array holding your image file names.
currentIndex: Keeps track of which image is currently shown.
updateImage(): Updates the src of the img element.
If the current index goes below 0 or above the last image, it loops around to make the slider circular.

📝 Important Notes:

Image Paths: Make sure image1.jpg, image2.jpg, etc., are in the same folder as your HTML file or update the paths accordingly.
Responsive: The slider is responsive by default and will scale with screen size.
More Features: You can later add autoplay, dot indicators, or transitions to enhance it.

✅ Final Thoughts

Now you’ve created a fully functional image slider with Next and Previous buttons using just HTML, CSS, and JavaScript. This project helps you understand the basics of DOM manipulation, event listeners, and dynamic content updates.

It’s also a great beginner project to include in your portfolio!

How to Build a Simple JavaScript Image Slider with Navigation Buttons

Follow us on

🖼️ Create an Image Slider with Next/Prev Buttons in JavaScript

🚀 What You Will Learn

🧱 Step 1: Create the HTML Structure

🔍 Explanation:

🎨 Step 2: Style the Slider with CSS

🔍 Explanation:

🧠 Step 3: Add JavaScript Logic

🔍 Explanation:

📝 Important Notes:

✅ Final Thoughts

📁 File Structure Overview

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us