Advanced Search

Jquery carousel

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* carousel */
  2. function carouselFunc(carousel,nextBtn,prevBtn) {
  3.  
  4.     //passed variables
  5.     var carousel = carousel;
  6.     var nextBtn = nextBtn;
  7.     var prevBtn = prevBtn;
  8.  
  9.     var carouselId = $(carousel).attr("id");
  10.     var carouselItemWidth = $(carousel).find("li:first").outerWidth();
  11.  
  12.     $(carousel).parents().addClass("animate");
  13.     $(carousel).css({ 'left': -carouselItemWidth }).css('width', '9999px');
  14.     $(carousel).find("li:first").before($(carousel).find("li:last"));
  15.     $(nextBtn).click(function() {
  16.         var carouselItemWidth = $(carousel).find("li").outerWidth();
  17.         var left_indent = parseInt($(carousel).css('left')) - carouselItemWidth;
  18. 		var Only2 = false;
  19.  
  20. 		if ($(carousel).find("li").size() == 2){
  21. 			 $(carousel).find("li:first").clone().appendTo(carousel);
  22. 			 Only2 = true;	 
  23. 		}
  24.  
  25.         $(carousel).animate({ 'left': left_indent }, 500, function() {
  26.             $(carousel).find("li:last").after($(carousel).find("li:first"));
  27. 			if (Only2 == true){
  28. 			 	$(carousel).find("li:last").remove();
  29. 			}
  30.             $(carousel).css({ 'left': -carouselItemWidth });
  31.         });
  32.  
  33.         return false;
  34.     });
  35.     $(prevBtn).click(function() {
  36.         var carouselItemWidth = $(carousel).find("li").outerWidth();
  37.         var left_indent = parseInt($(carousel).css('left')) + carouselItemWidth;
  38.         $(carousel).animate({ 'left': left_indent }, 500, function() {
  39.             $(carousel).find("li:first").before($(carousel).find("li:last"));
  40.             $(carousel).css({ 'left': -carouselItemWidth });
  41.         });
  42.         return false;
  43.     });
  44. }

URL: http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.