jQuery image slider example

In this article, I will show you how to create jQuery image slider example. Without using external plugin create your own slider as it’s not much difficulty, which is so easy. You need to reference a jQuery plugin to your Html page.

Create a simple two css class active and inactive and create a div tag as named divslider. Inside the div tag and create list of image for simple slideshow. For every image, add the css class. Now, we need to just hide and show each image one by one sequentially.

Image slider jQuery code:

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () {
                SlideClass();
            }, 4000);
        });
 
        function SlideClass() {
            var currentActiveImage = $("img.active").attr("id");
            $("#" + currentActiveImage).removeClass("active");
            $("#" + currentActiveImage).addClass("inactive");
            $("#" + currentActiveImage).next().removeClass("inactive");
            $("#" + currentActiveImage).next().addClass("active");
            //Check for the last image, then set first image as active  
            var CheckThisLastImage = $("#" + currentActiveImage).next().length;
            if (CheckThisLastImage == 0) {
                $('#divslider img').first().removeClass('inactive');
                $('#divslider img').first().addClass('active');
            }
        }
    </script>
 
    <style type="text/css">
        .active {
            width: 100%;
            height: 300px;
        }
 
        .inactive {
            display: none;
        }
    </style>
<h2 style="text-align:center;color:#055996">Jqueryimage slideshow</h2>
    <div style="width: 40%; margin: auto; height: 300px;" id="divslider">
        <img src="UploadFiles/Koala.jpg" class="active" id="img1" />
        <img src="UploadFiles/Lighthouse.jpg" class="inactive" id="img2" />
        <img src="UploadFiles/Penguins.jpg" class="inactive" id="img3" />
        <img src="UploadFiles/Tulips.jpg" class="inactive" id="img4" />
    </div>

jQuery image slider demo: