Carousel with sections and animated background images

Question

I have made a carousel with sections and animated background images. How can I make the code better and more reusable? It's now working with a width of only 3 sections.

$(function () {
    var state = 0;
    var background = $(".selection-carousel .carousel-image"),
        buttonLeft = $(".selection-carousel .carousel-left"),
        buttonRight = $(".selection-carousel .carousel-right"),
        imageWidth = 1000,
        imageWidthMin = -1000,
        reelSize = 3,
        imageSum = $('.selection-carousel img').size(),
        maxPos = (imageSum - reelSize) * imageWidth;
    $(".selection-carousel section").hide();
    $(".selection-carousel section:first").show();
    $(".selection-carousel section:first").append(' <div class="steam"></div> ');

    // If ie8 than use drop shadow fallback
    if ($("html").hasClass("ie8")) {
        $(".selection-carousel section:first h2, .selection-carousel section:first p").dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
    }

    buttonLeft.hide();
    buttonRight.click(function (e) {
        e.preventDefault();
        var trigger = $('class'),
            maxPos = (imageSum - reelSize) * -imageWidthMin,
            image_reelPosition = (trigger === 'carousel-right') ? -imageWidth : imageWidth,
            reel_currentPosition = $('.carousel-image').css('left').replace('px', ''),
            pos = reel_currentPosition - image_reelPosition;
        $(".selection-carousel section:visible .steam").remove();
        if ($(background).is(':animated')) {
            $(background).is(':animated').stop();
        }
        background.animate({ left: "-=1000px" }, 1100, function () {
            $(".selection-carousel section:visible").fadeOut(300, function () {
                $(this).next().fadeIn(600, function () {
                    if ($("html").hasClass("textshadow")) {
                        $(this).append(' <div class="steam"></div> ');
                        createSteam();
                    }
                    if ($("html").hasClass("no-textshadow")) {
                        $("h2", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                        $("p", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                    }
                });
            });
        });
        state++;
        checkstate();
    });
    buttonLeft.click(function (e) {
        e.preventDefault();
        var trigger = $('class'),
            maxPos = (imageSum - reelSize) * -imageWidthMin,
            image_reelPosition = (trigger === 'carousel-right') ? -imageWidth : imageWidth,
            reel_currentPosition = $('.carousel-image').css('left').replace('px', ''),
            pos = reel_currentPosition - image_reelPosition;
        $(".selection-carousel section:visible .steam").remove();
        if ($(background).is(':animated')) {
            $(background).is(':animated').stop();
        }
        background.animate({ left: "+=1000px" }, 1100, function () {
            $(".selection-carousel section:visible").hide().prev().fadeIn(600, function () {
                if ($("html").hasClass("textshadow")) {
                    $(this).append(' <div class="steam"></div> ');
                    createSteam();
                }
                $(".dropShadow").remove();
                if ($("html").hasClass("no-textshadow")) {
                    $("h2", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                    $("p", this).dropShadow({ left: 0, top: 0, opacity: 0.6, blur: 3 });
                }
            });
        });
        state--;
        checkstate();
    });
    function checkstate () {
        if  (state == 0) {
            if ($(".carousel-left").is(':visible'))
                if ($("html").hasClass("textshadow")) {
                    $(".carousel-left").fadeOut(600);
                } else {
                    $(".carousel-left").hide();
                }
        }
        else if (state == 1) {
              if ($(".carousel-left").is(':hidden'))
                 if ($("html").hasClass("textshadow")) {
                    $(".carousel-left").fadeIn('slow'); 
                 } else {
                     $(".carousel-left").show(); 
                 }

              if ($(".carousel-right").is(':hidden'))
                if ($("html").hasClass("textshadow")) {
                    $(".carousel-right").fadeIn(600);
                } else {
                    $(".carousel-right").show();
                }
        }
        else {
              if ($(".carousel-right").is(':visible'))
              if ($("html").hasClass("textshadow")) {
                 $(".carousel-right").fadeOut(600); 
              } else {
                   $(".carousel-right").hide(); 
              }
        }
    }
});

Answer 1

Some small tips could be:

Use the jquery plugin strcture for extending it with options, create/destroy/next/prev functions. See: http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Don't overuse selectors

var background = $(".selection-carousel .carousel-image"),
    buttonLeft = $(".selection-carousel .carousel-left"),
    buttonRight = $(".selection-carousel .carousel-right"),

Could be:

var selector = $('.selection-carousel'),
    background = selector.children('.carousel-left'),
    buttonLeft = selector.children('.carousel-left'),
    buttonRight = selector.children('.carousel-right'),

Everytime you make it search the entire DOM, it makes it slower/heavier to use. (Your checksate also overuse it).

Make some methods for the plugin, so you can create the carousel, destroy it, or send navigations functions (next/prev/gotoId).

Just some small tips :)