How to Build a Simple JavaScript Image Slider with Navigation Buttons

Google Advertisement

Learn step-by-step how to create an image slider using JavaScript with next and previous buttons. Perfect for beginners with easy explanations and code examples.

Published on 16 May 2025

🖼️ 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.

🔥 Read with Full Features on Our Website

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)
Google Advertisement

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:

Google Advertisement

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.
Google Advertisement

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!

📁 File Structure Overview

Google Advertisement

How to Build a Simple JavaScript Image Slider with Navigation Buttons

🖼️ 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

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize