jQuery Simple Carousel

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

HTML

<div id="carousel">
    <ul id="carouselNav">
        <li>
            <a href="#"><img src="http://www.openfoundry.org/images/logo-of.png" style="width:100%; height:100%"/></a>
        </li>
        <li>
            <a href="#"><img src="http://www.openfoundry.org/images/logo-of.png" style="width:100%; height:100%"/></a>
        </li>
        <li>
            <a href="#"><img src="http://www.openfoundry.org/images/logo-of.png" style="width:100%; height:100%"/></a>
        </li>
        <li>
            <a href="#"><img src="http://www.openfoundry.org/images/logo-of.png" style="width:100%; height:100%"/></a>
        </li>
    </ul>
</div>

CSS

#carousel {
    text-align: center;
    background: #cdcdcd;
}
#carousel ul {
    list-style: none;
}
#carousel li {
    display: none;
}
#resizable
{ 
width: 150px; height: 150px; padding: 0.5em; 
}
  #resizable h3 
  { 
  text-align: center; margin: 0; 
  }

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();
	});
  
  $(function() {
    $( "#carousel" ).resizable();
  });
  
});