jQuery image slider rotator

Very basic jQuery image sliding rotator

by Amit Vishwakarma

HTML

<div id="slider">
        <a href="#">
            <img src="http://placehold.it/350x150&text=Slide+1"/>
        </a>
        <a href="#">
            <img src="http://placehold.it/350x150&text=Slide+2"/>
        </a>
        <a href="#">
            <img src="http://placehold.it/350x150&text=Slide+3"/>
        </a>
        <a href="#">
            <img src="http://placehold.it/350x150&text=Slide+4"/>
        </a>
        <a href="#">
            <img src="http://placehold.it/350x150&text=Slide+5"/>
        </a>
        <a href=#">
            <img src="http://placehold.it/350x150&text=Slide+6"/>
        </a>
    </div>

CSS

#slider a{
    display: none;
}

JavaScript

$(document).ready(function(){

    $("#slider a").first().show();

    var index = 0;
    var count = 5;

    function bannerRotator() {
        $('#slider a').delay(4300).eq(index).fadeOut(function() { 
            if (index === count){
                index = -1;
            }
            
            $('#slider a').eq(index + 1).fadeIn(function() {
                index++;
                bannerRotator();
            });
        });
    }
    bannerRotator();

});