Issue while creating image slider using jquery

Mohemmad K

I created an image slider using jquery. I am getting the output perfectly but my problem is that it runs the single cycle i.e. if there are 4 images then after the last image it stops I want to make it cyclic that is after the last image slider should display the first image.

My code is:

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

<html>
    <head>
    </head>
    <body>
        <div id="slideshow">
            <img src="1.jpg" style="position:absolute;" class="active" />
            <img src="2.jpg" style="position:absolute;" />
            <img src="3.jpg" style="position:absolute;" />
        </div>
    </body>
    <script src="jquery-1.10.1.min.js"></script>
    <script>

    function slideSwitch() {
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    

        $next.addClass('active');      

        $active.removeClass('active');      


    }

    $(function() {
        setInterval( "slideSwitch()", 2000 );
        /*if($('#slideshow:last-child').hasClass('active'))
        {
            alert("Complete");
        }*/
    });
</script>
</html>

What should I do to run the slider in cyclic mode.

The reason behind applying this simple slider is that I want further customize the slider.

Sujata Chanda

Try this code:-

          function slideSwitch() {
                var $active = $('div#slideshow img.active'),
                $next;    

                if($('div#slideshow img.active').is(':last-child'))
                {
                    $next = $('div#slideshow img').first();  // get the first image 

                }else{
                    $next = $active.next();    
                }

                $next.addClass('active');      

                $active.removeClass('active'); 
            }

Collected from the Internet

Please contact [email protected] to delete if infringement.