Creating a Custom Image Slider using JavaScript

Creating a Custom Image Slider using JavaScript

Last Updated : 28 Jun, 2025

An Image Slider or Image Carousel is a popular feature on websites that allows us to display multiple images within a limited space. It helps showcase attractive and dynamic visuals to engage visitors effectively.

Steps To Creating a Custom Image Slider using JavaScript

These are the some steps which we need to do for creating image slider using javascript :

Step 1: Create the HTML Structure

The first step is to build the basic structure of the image slider using HTML. We create a parent container div that holds all the images, and each image along with its caption is wrapped inside a div with a specific class for styling and functionality.

html

<html>
<body>
    <div class="container">
        <div class="image-sliderfade fade">
            <img src="img1.jpg" 
                 style="width: 100%" />
            <div class="text">Image caption 1</div>
        </div>

        <div class="image-sliderfade fade">
            <img src="img2.jpg" 
                 style="width: 100%" />
            <div class="text">Image caption 2</div>
        </div>

        <div class="image-sliderfade fade">
            <img src="img3.jpg" 
                 style="width: 100%" />
            <div class="text">Image caption 3</div>
        </div>

        <div class="image-sliderfade fade">
            <img src="img3.jpg" 
                 style="width: 100%" />
            <div class="text">Image caption 4</div>
        </div>
    </div>
    <br />
    <div style="text-align: center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</body>
</html>

Step 2: Style the Slider with CSS

Now that the HTML structure is ready, the next step is to make it look good and responsive using CSS. This includes:

Setting the container size.
Adding fade-in and fade-out animations.
Styling the images and captions.
Designing the navigation dots and positioning them

css

* {
    box-sizing: border-box;
}
body {
    font-family: Verdana, sans-serif;
}
.image-sliderfade {
    display: none;
}

img {
    vertical-align: middle;
}
.container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 20px 15px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40%;
    background: rgba(0, 0, 0, 0.7);
    text-align: left;
}
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: transparent;
    border-color: #ddd;
    border-width: 5 px;
    border-style: solid;
    border-radius: 50%;
    display: inline-block;
    transition: border-color 0.6s ease;
}
.active {
    border-color: #666;
}
.fade {
    -webkit-animation-name: fade-image;
    -webkit-animation-duration: 1.5s;
    animation-name: fade-image;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade-image {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-image {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}
@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px;
    }
}

Step 3: Add Functionality with JavaScript

Finally, we add JavaScript to make the images change automatically after a set interval and update the active dot to match the current slide. The script will:

Keep track of the current slide index.
Hide all slides, then display the current slide.
Update the active dot.
Automatically move to the next slide every few seconds.

javascript

let slideIndex = 0;
showSlides(); 

function showSlides() {
    let i;
    let slides = document.getElementsByClassName("image-sliderfade");

    let dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {
       
        slides[i].style.display = "none";
    }
    slideIndex++;
    
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    
    setTimeout(showSlides, 2000);
}

Final Result

Once all steps are implemented, your image slider will automatically cycle through images every 2 seconds, with navigation dots indicating the current image.

Creating a Custom Image Slider using JavaScript

S

Saptarshi_Das

Improve

Article Tags :

Similar Reads

Creating a Simple Image Editor using JavaScript

In this article, we will be creating a Simple Image Editor that can be used to adjust the image values like brightness, contrast, hue, saturation, grayscale, and sepia. Image editors allow one to quickly edit pictures after they have been captured for enhancing them or completely changing their look

How to create image slider using HTML CSS and JavaScript ?

An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images.App

Creating A Range Slider in HTML using JavaScript

Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows one to choose the value from a range which is represented as a slider. A Range slider is typically represented using a slid

Automatic Image Slider using JavaScript

In this article, we will discuss how to create an automatic image slider using JavaScript. An image slider is a popular component of modern websites that allows the display of multiple images in a single location, usually in a sliding motion. With the use of JavaScript, creating an automatic image s

How to Create Image Gallery using JavaScript?

An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Her