How to Design Image Slider using jQuery ? - GeeksforGeeks

28 Jan, 2022
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.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
<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>
jQuery Code: jQuery is used to design the slider interactive.  
javascript
<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>
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">         <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="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>         <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>
Output:  
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ruhelaa48
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)