jQuery Simple Carousel

jQuery carousel automatically rotates elements, on hover it stops to allow clicking on images.

by Mark

HTML

<div id="carousel">
    <ul id="carouselNav">
        <li>
            <a href="#"><img src="http://placehold.it/300x150&text=Image 1" /></a>
        </li>
        <li>
            <a href="#"><img src="http://placehold.it/300x150&text=Image 2" /></a>
        </li>
        <li>
            <a href="#"><img src="http://placehold.it/300x150&text=Image 3" /></a>
        </li>
        <li>
            <a href="#"><img src="http://placehold.it/300x150&text=Image 4" /></a>
        </li>
    </ul>
</div>

CSS

#carousel {
    text-align: center;
    background: #cdcdcd;
}
#carousel ul {
    list-style: none;
}
#carousel li {
    display: none;
}

JavaScript

jQuery(document).ready(function(){
	/**
	 * Check if first li element is hidden
	 * then show
	 */
	if( jQuery('#carouselNav li:first-child').is(':hidden') ) {
		// Toggle visibility
		jQuery('#carouselNav li:first-child').toggle();
	}
	// Interval time
	var carouselInterval = 5000;
	// Slider
	function carouselSlide(){
		// Check if last element was reached
		if( jQuery('#carouselNav li:visible').next().length == 0 ) {
			// Hide last li element
			jQuery('#carouselNav li:last-child').slideUp('fast');
			// Show the first one
			jQuery('#carouselNav li:first-child').slideDown('fast');
		} else {
			// Rotate elements
			jQuery('#carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
		}
	}
	// Set Interval
	var carouselScroll = setInterval(carouselSlide,carouselInterval);
	// Pause on hover
	jQuery('#carousel').hover(function() {
		clearInterval(carouselScroll);
	}, function() {
		carouselScroll = setInterval(carouselSlide,carouselInterval);
		carouselSlide();
	});
});