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

My Personal Notes

Last Updated : 23 May, 2022

Related Articles

How to Design Image Slider using jQuery ?

html

CSS

javascript

html

Full Stack Development with React & Node JS - Live

Master JavaScript - Complete Beginner to Advanced

JAVA Backend Development - Live

Related Articles

How to Design Image Slider using jQuery ?

html

CSS

javascript

html

Please Login to comment...

Full Stack Development with React & Node JS - Live

Master JavaScript - Complete Beginner to Advanced

JAVA Backend Development - Live