Posted By

lwcooper on 01/19/10

Tagged

Versions (?)

Last Edited at 01/19/10 07:30am

Statistics

Viewed 533 times

Favorited by 1 user(s)

Related snippets

Jquery carousel with auto rotate

/ Published in: jQuery

A simple auto rotating carousel with a link for each slide

Highlighted TextExpand

$('#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();
});

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.