Return to Snippet

Revision: 25032
at March 18, 2010 05:38 by satonthat


Initial Code
/* carousel */
function carouselFunc(carousel,nextBtn,prevBtn) {
 
    //passed variables
    var carousel = carousel;
    var nextBtn = nextBtn;
    var prevBtn = prevBtn;
 
    var carouselId = $(carousel).attr("id");
    var carouselItemWidth = $(carousel).find("li:first").outerWidth();
 
    $(carousel).parents().addClass("animate");
    $(carousel).css({ 'left': -carouselItemWidth }).css('width', '9999px');
    $(carousel).find("li:first").before($(carousel).find("li:last"));
    $(nextBtn).click(function() {
        var carouselItemWidth = $(carousel).find("li").outerWidth();
        var left_indent = parseInt($(carousel).css('left')) - carouselItemWidth;
		var Only2 = false;
 
		if ($(carousel).find("li").size() == 2){
			 $(carousel).find("li:first").clone().appendTo(carousel);
			 Only2 = true;	 
		}
 
        $(carousel).animate({ 'left': left_indent }, 500, function() {
            $(carousel).find("li:last").after($(carousel).find("li:first"));
			if (Only2 == true){
			 	$(carousel).find("li:last").remove();
			}
            $(carousel).css({ 'left': -carouselItemWidth });
        });
 
        return false;
    });
    $(prevBtn).click(function() {
        var carouselItemWidth = $(carousel).find("li").outerWidth();
        var left_indent = parseInt($(carousel).css('left')) + carouselItemWidth;
        $(carousel).animate({ 'left': left_indent }, 500, function() {
            $(carousel).find("li:first").before($(carousel).find("li:last"));
            $(carousel).css({ 'left': -carouselItemWidth });
        });
        return false;
    });
}

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

Initial Description


Initial Title
Jquery carousel

Initial Tags


Initial Language
jQuery