Return to Snippet

Revision: 22677
at January 19, 2010 07:33 by lwcooper


Updated 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();
});

Revision: 22676
at January 19, 2010 07:31 by lwcooper


Updated 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();
	}
}
var carouselScroll = setInterval(carouselSlide,carouselInterval);
$('.homepage #content').hover(function() {
	clearInterval(carouselScroll);
}, function() {
	carouselScroll = setInterval(carouselSlide,carouselInterval);
	carouselSlide();
});

Revision: 22675
at January 19, 2010 07:30 by lwcooper


Initial Code
$('#homeCarouselNav li:first-child').addClass('on');
var onAnimationComplete = function() { animating = false; }
var timelineItemWidth = $('#homeCarousel ul > li').outerWidth();
$("#homeCarouselNav > li a").each(function(i) {
	var id = i;
	$(this).click(function() {
		$('#homeCarousel > ul').animate({ left: -timelineItemWidth * id }, 500, onAnimationComplete, false);
		$('#homeCarouselNav > li').removeClass('on');
		$(this).parent('li').addClass('on');
		return false;
	});
});
// Auto scrolling
var carouselInterval = 5000;
function carouselSlide(){
	if( $('#homeCarouselNav li:last-child').hasClass("on") ) {
		$('#homeCarouselNav li:last-child').removeClass('on');
		$('#homeCarouselNav li:first-child').addClass('on');
		$('#homeCarousel > ul').animate({ left: 0 }, 500, onAnimationComplete, false);
	} else {
		$('#homeCarouselNav li.on').next('li').children('a').click();
	}
}
var carouselScroll = setInterval(carouselSlide,carouselInterval);
$('.homepage #content').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