How to Design Image Slider using jQuery ?

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 mouse hover event 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 into two sections first we will create the structure by HTML the Design the structure bys CSS and make interactive by jQuery.

Creatring 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        var slideIndex = 1;
        displaySlide(slideIndex);
       
        function moveSlides(n) {
            displaySlide(slideIndex += n);
        }
       
        function activeSlide(n) {
            displaySlide(slideIndex = n);
        }
       
        /* Main function */
        function displaySlide(n) {
            var i;
            var totalslides = 
                document.getElementsByClassName("slide");
            var 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>

    chevron_right

    
    

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
        var slideIndex = 1;
        displaySlide(slideIndex);
   
        function moveSlides(n) {
            displaySlide(slideIndex += n);
        }
   
        function activeSlide(n) {
            displaySlide(slideIndex = n);
        }
   
        /* Main function */
        function displaySlide(n) {
            var i;
            var totalslides = 
                document.getElementsByClassName("slide");
              
            var 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.