Jquery carousel with auto rotate


/ Published in: jQuery
Save to your folder(s)

A simple auto rotating carousel with a link for each slide


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.