jquery.fjanses.carousel.js

/*
Usage:
    $('.carousel').fjansesCarousel();
    
or with options:

    $('.carousel').fjansesCarousel({
        'delay': 3000, //in miliseconds
        'child': 'li' //elements that carousel will loop through
    });

*/

$.fn.fjansesCarousel = function (options) {
    
    var defaults = {
        'delay': 4000,
        'child': 'article',
    };
    var options = $.extend(defaults, options);
    
    return this.each(function () {
        
        var currentPage = 1,
            singleWidth = $(this).find(options.child + ':first').outerWidth(),
            visible = Math.ceil($(this).innerWidth() / singleWidth),
            pages = Math.ceil($(this).find(options.child).length / visible),
            timer = 0,
            delayTime = 4000;
            
        $(this).html("<div class='wrapper'><div class='fjanses_slider' style='width: 9999px;'>" + $(this).html() + "</div></div>");
        
        var wrapper = $('.wrapper', this);
        
        $(this).find(options.child).css('clear', 'none');
        wrapper.css('overflow', 'hidden');
        $(this).prepend('<a href="#" class="arrowLeft"></a><a href="#" class="arrowRight"></a>');
        
        $(options.child, this).filter(':first').before($(options.child, this).filter(':first').clone().addClass('cloned'));
        $(options.child, this).filter(':last').after($(options.child, this).filter(':first').clone().addClass('cloned'));
        
        wrapper.width(singleWidth);
        
        wrapper.scrollLeft(singleWidth * visible);
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            wrapper.animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                timer = setTimeout(function(){ gotoPage(currentPage + 1) }, delayTime);
                if (page == 0) {
                    wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 
 
                currentPage = page;
            });                
            
            return false;
        }
        
        timer = setTimeout(function(){ gotoPage(currentPage + 1); }, delayTime);
        
        $('a.arrowLeft', this).click(function () {
            clearTimeout(timer);
            return gotoPage(currentPage - 1);                
        });
        
        $('a.arrowRight', this).click(function () {
            clearTimeout(timer);
            return gotoPage(currentPage + 1);
        });
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};