Advanced Search

Jquery carousel with auto rotate

/ Published in: jQuery
Save to your folder(s)
A simple auto rotating carousel with a link for each slide

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $('#carouselNav li:first-child').addClass('on');
  2. var onAnimationComplete = function() { animating = false; }
  3. var timelineItemWidth = $('#carousel ul > li').outerWidth();
  4. $("#carouselNav > li a").each(function(i) {
  5. 	var id = i;
  6. 	$(this).click(function() {
  7. 		$('#carousel > ul').animate({ left: -timelineItemWidth * id }, 500, onAnimationComplete, false);
  8. 		$('#carouselNav > li').removeClass('on');
  9. 		$(this).parent('li').addClass('on');
  10. 		return false;
  11. 	});
  12. });
  13. // Auto scrolling
  14. var carouselInterval = 5000;
  15. function carouselSlide(){
  16. 	if( $('#carouselNav li:last-child').hasClass("on") ) {
  17. 		$('#carouselNav li:last-child').removeClass('on');
  18. 		$('#carouselNav li:first-child').addClass('on');
  19. 		$('#carousel > ul').animate({ left: 0 }, 500, onAnimationComplete, false);
  20. 	} else {
  21. 		$('#carouselNav li.on').next('li').children('a').click();
  22. 	}
  23. }
  24. // Pause Auto scrolling on carousel hover
  25. var carouselScroll = setInterval(carouselSlide,carouselInterval);
  26. $('#carousel').hover(function() {
  27. 	clearInterval(carouselScroll);
  28. }, function() {
  29. 	carouselScroll = setInterval(carouselSlide,carouselInterval);
  30. 	carouselSlide();
  31. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.