jquery carousel - jQuery Snipplr Social Repository

Revision: 21362

at April 7, 2010 05:45 by flicity

Updated Code

/* carousel */
function carouselFunc(carousel,nextBtn,prevBtn) {

    //passed variables
    var carousel = carousel;
    var nextBtn = nextBtn;
    var prevBtn = prevBtn;
	var carouselInterval = 5000;

    
    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"));
	
     //if user clicked on next button
    function goToNext(){
        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;
    }
	
    //if user clicked on next button
    function goToPrev(){
        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;
    }
	
		 var carouselScroll = setInterval(goToNext, carouselInterval);
        //if mouse hover, pause the auto rotation, otherwise rotate it
		
        $('.mainFeature').hover(function(){
            clearInterval(carouselScroll);
        }, function(){
            carouselScroll = setInterval(goToNext, carouselInterval);
        });
		
	$(prevBtn).click(function(){
        goToPrev();
        return false;
    });
    $(nextBtn).click(function(){
        goToNext();
        return false;
    });


}

Revision: 21361

at March 5, 2010 06:08 by flicity

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

Revision: 21360

at March 5, 2010 05:38 by flicity

Updated 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;
		
		if ($(carousel).find("li").size() == 2){
			 $(carousel).find("li:first").clone().appendTo(carousel);
		}
        $(carousel).animate({ 'left': left_indent }, 500, function() {
            $(carousel).find("li:last").after($(carousel).find("li:first"));
            $(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;
    });
}

Revision: 21359

at December 11, 2009 10:18 by flicity

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).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;
        $("\"#" + carouselId + ":not(:animated)\"").animate({ 'left': left_indent }, 500, function() {
            $(carousel).find("li:last").after($(carousel).find("li:first"));
            $(carousel).css({ 'left': -carouselItemWidth });
        });
        return false;
    });
    $(prevBtn).click(function() {
        var carouselItemWidth = $(carousel).find("li").outerWidth();
        var left_indent = parseInt($(carousel).css('left')) + carouselItemWidth;
        $("\"#" + carouselId + ":not(:animated)\"").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

parameters:

ul containing carousel,
next btn
prev btn

Initial Title

jquery carousel

Initial Tags

jquery

Initial Language

jQuery

Choose a language for easy browsing: