Open In App

How to Design Image Slider using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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=
        </div>
        <div class="slide">
            <div class="slideNumber">2</div>
            <img src=
        </div>
        <div class="slide">
            <div class="slideNumber">3</div>
            <img src=
        </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. 

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=
 
    <style>
        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;
        }
    </style>
</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=
        </div>
        <div class="slide">
            <div class="slideNumber">2</div>
            <img src=
        </div>
        <div class="slide">
            <div class="slideNumber">3</div>
            <img src=
        </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>
 
    <script>
        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";
        }
    </script>
</body>
 
</html>


Output: 



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads