Advanced Search

Return to Snippet

Revision: 25030
at March 18, 2010 05:29 by satonthat
Initial Code 
$('#carouselNav li:first-child').addClass('on');
var onAnimationComplete = function() { animating = false; }
var timelineItemWidth = $('#carousel ul > li').outerWidth();
$("#carouselNav > li a").each(function(i) {
	var id = i;
	$(this).click(function() {
		$('#carousel > ul').animate({ left: -timelineItemWidth * id }, 500, onAnimationComplete, false);
		$('#carouselNav > li').removeClass('on');
		$(this).parent('li').addClass('on');
		return false;
	});
});
// Auto scrolling
var carouselInterval = 5000;
function carouselSlide(){
	if( $('#carouselNav li:last-child').hasClass("on") ) {
		$('#carouselNav li:last-child').removeClass('on');
		$('#carouselNav li:first-child').addClass('on');
		$('#carousel > ul').animate({ left: 0 }, 500, onAnimationComplete, false);
	} else {
		$('#carouselNav li.on').next('li').children('a').click();
	}
}
// Pause Auto scrolling on carousel hover
var carouselScroll = setInterval(carouselSlide,carouselInterval);
$('#carousel').hover(function() {
	clearInterval(carouselScroll);
}, function() {
	carouselScroll = setInterval(carouselSlide,carouselInterval);
	carouselSlide();
});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
A simple auto rotating carousel with a link for each slide

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Jquery carousel with auto rotate

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery