How to Design Image Slider using jQuery ?

Last Updated : 28 Apr, 2025

A slideshow container that cycles through a list of images on a web page. The following article will guide you to implement an image slider using HTML, CSS, and jQuery. The jQuery image slider contains images that run them using the previous and next icons. Previous and Next arrows are used to traverse back and forth on the mouse hover events on the images. The following example code is implemented in a simple and flexible way of showing the images one by one in the carousel by using HTML, CSS, and jQuery. We will accomplish the task in two sections first we will create the structure in HTML Design the structure in CSS and make it interactive by jQuery.
Creating Structure: In this section, we will create the structure of the image slider.

HTML Code: HTML is used to create the structure of an image slider.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to Design Image
        Slider using jQuery ?
    </title>

    <meta name="viewport" 
          content="width=device-width, initial-scale=1">

    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>

        <b>
            How to code Image
            Slider using jQuery
        </b>

        <br><br>
    </center>

    <!-- Image container of the image slider -->
    <div class="image-container">
        <div class="slide">
            <div class="slideNumber">1</div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">
        </div>
        <div class="slide">
            <div class="slideNumber">2</div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png">
        </div>
        <div class="slide">
            <div class="slideNumber">3</div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png">
        </div>

        <!-- Next and Previous icon to change images -->
        <a class="previous" onclick="moveSlides(-1)">
            <i class="fa fa-chevron-circle-left"></i>
        </a>
        <a class="next" onclick="moveSlides(1)">
            <i class="fa fa-chevron-circle-right"></i>
        </a>
    </div>
    <br>

    <div style="text-align:center">
        <span class="footerdot" onclick="activeSlide(1)">
        </span>
        <span class="footerdot" onclick="activeSlide(2)">
        </span>
        <span class="footerdot" onclick="activeSlide(3)">
        </span>
    </div>
</body>

</html>

Designing Structure: Here we will be done the designing part of the image slider by using CSS and make the slider interactive by using jQuery.

CSS Code: Designing the structure on the basis of tags and classes of all the elements.

CSS

img {
    width: 100%;
}

.height {
    height: 10px;
}

/* Image-container design */
.image-container {
    max-width: 800px;
    position: relative;
    margin: auto;
}

.next {
    right: 0;
}

/* Next and previous icon design */
.previous,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 10px;
    margin-top: -25px;
}

/* caption decorate */
.captionText {
    color: #000000;
    font-size: 14px;
    position: absolute;
    padding: 12px 12px;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Slider image number */
.slideNumber {
    background-color: #5574C5;
    color: white;
    border-radius: 25px;
    right: 0;
    opacity: .5;
    margin: 5px;
    width: 30px;
    height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    position: absolute;
}

.fa {
    font-size: 32px;
}

.fa:hover {
    transform: rotate(360deg);
    transition: 1s;
    color: white;
}

.footerdot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.5s ease;
}

.active,
.footerdot:hover {
    background-color: black;
}

jQuery Code: jQuery is used to design the slider interactive.

javascript

let slideIndex = 1;
displaySlide(slideIndex);

function moveSlides(n) {
    displaySlide(slideIndex += n);
}

function activeSlide(n) {
    displaySlide(slideIndex = n);
}

/* Main function */
function displaySlide(n) {
    let i;
    let totalslides =
        document.getElementsByClassName("slide");
    let totaldots =
        document.getElementsByClassName("footerdot");

    if (n > totalslides.length) {
        slideIndex = 1;
    }

    if (n < 1) {
        slideIndex = totalslides.length;
    }
    for (i = 0; i < totalslides.length; i++) {
        totalslides[i].style.display = "none";
    }
    for (i = 0; i < totaldots.length; i++) {
        totaldots[i].className =
            totaldots[i].className.replace(" active", "");
    }
    totalslides[slideIndex - 1].style.display = "block";
    totaldots[slideIndex - 1].className += " active";
}

Complete Solution: In this section, we will combine the above sections together that will be an Image Slider.