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

• Rob W: In terms of readability, you can move the repeating part of your code to a separate function, and call it.
• Raynos: You can't optimise javascript code without knowing your HTML structure

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 :)