A feature carousel I made for a client site, evolved into a circular carousel but didn't want to lose the old code...

feature-carousel-v1.js

featureCarousel = function () {

            // Set up some variables
            var $carousel = $('ul.feature-carousel'), // The carousel UL
                $lis = $carousel.find("li"), // An object of the entire list
                list = $.makeArray($lis), // Array of the list items - might be useful, might not, who knows!
                itemCount = list.length,
                curPos = 0,
                maxPos = itemCount - 2,

                // Calculate the width the full carousel should be...
                margin = parseInt($(list[0]).css('marginLeft')) *2,
                itemWidth = $(list[0]).width(),
                animationSize = itemWidth + margin,
                carouselWidth = animationSize * itemCount;

            // Wrap the carousel, to allow for the hiding of the extra bit of the list...
            $carousel.wrapAll('<div class="feature-carousel-wrapper"></div>');
            // Give the wrapper an object variable to make working with it easier, might remove this though as only accessing it once so could be overkill!
            var $wrapper = $('.feature-carousel-wrapper');
            // Set up the wrapper - maybe put this into the CSS...?
            $wrapper.css({
                "overflow": "hidden",
                "position": "relative",
                "width": $wrapper.width(),
                "height": $carousel.height()
            });
            // Append the wrapper with next and previous links, styling handled by CSS
            $wrapper.append('<a href="#next"></a><a href="#prev"></a>');
            $('a[href=#prev]').hide();

            // Set the carousel's full width!
            $carousel.width(carouselWidth);

            // Set up all the inactive list items
            $lis.each( function (idx) {
                if( idx > 1) {
                    $(this).addClass("inactive").find(".fam-photo").slideUp(0);
                }
            });

            var scrollNext = function (e) { // right arrow, animate left!
                e.preventDefault();

                $('a[href=#prev]').show();
                
                // Change the position (if we're not at the end of the carousel)                
                if( curPos < maxPos ) {
                    curPos++;
                    if( curPos === maxPos ) { $(this).hide(); }
                }
                
                // Work out the move distance, *-1 because we're animating marginLeft
                mvDis = (animationSize * curPos) * -1;

                // Animate the active/inactive switchover add/remove class and slide up/down the images!
                $(list[curPos-1]).addClass("inactive").find(".fam-photo").slideUp(1000); // going inactive
                $(list[curPos+1]).removeClass("inactive").find(".fam-photo").slideDown(1000); // becoming active
                // Slide the carousel along to reveal the new element
                $carousel.animate({"marginLeft": mvDis}, 1000); // move left

                return false;
            }
            
            var scrollPrev = function (e) { // left arrow, animate right!
                e.preventDefault();

                $('a[href=#next]').show();

                // Change the position (if we're not at the start of the carousel)                
                if ( curPos > 0 ) {
                    curPos--;
                    if( curPos === 0) { $(this).hide(); }
                }
                // Work out the move distance, *-1 because we're animating marginLeft
                mvDis = (animationSize * curPos) * -1;

                // Animate the active/inactive switchover add/remove class and slide up/down the images!
                $(list[curPos+2]).addClass("inactive").find(".fam-photo").slideUp(1000); // going inactive
                $(list[curPos]).removeClass("inactive").find(".fam-photo").slideDown(1000); // becoming active
                // Slide the carousel along to reveal the new element
                $carousel.animate({"marginLeft": mvDis}, 1000); // move right

                return false;   
            }

            // Click handlers
            $wrapper.on('click', 'a[href=#next]', scrollNext );
            $wrapper.on('click', 'a[href=#prev]', scrollPrev );

        }