RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/creating-custom-image-slider-javascript/ below:

Creating a Custom Image Slider using JavaScript

Last Updated : 11 Jul, 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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4