Jquery - Carasol build finished and would like advice on best practice / neatening up my code
<p>I have been building my own carasol over the past few days.</p>

<p>My Jquery is based on tutorials on the web and also from help and advice from SO.</p>

<p>I am not a Jquery guru just an enthusiast and think my code is a little sloppy, hence the post.</p>

<p>here is a link to the working code: <a href="http://jsfiddle.net/JHqBA/2/" rel="nofollow">http://jsfiddle.net/JHqBA/2/</a> <strong>(updated link)</strong></p>

<p>basically what happens is:
if someone hits the page with a # values in the url it will show the appropriate slide and example would be www.hello.com#two, this would slide to slide two</p>

<p>if someone clicks the numbers it will show the appropriate slide</p>

<p>next and prev also slide through the slides.</p>

<p>The question is, is there anything i could have wrote better as i know there is alot of duplicate code.</p>

<p>I understand its a big ask but it would help me learn a little more (i think my code is a little old school)</p>

<p>if anyone has any questions please feel free to ask and ill answer what it does or is supposed to do.</p>

<p>Sluap</p>

<p><em><strong>--- Edit ----</em></strong></p>

<p>I have made only one aniamtion function now which has got rid of alot of duplicate code.</p>

<p>I have yet to look into <strong>on function</strong> but will do soon.</p>

<p>I would like to know more about the <strong>create a new function, outside of the jQuery ready block</strong> as i cant get this working or quite understand how i can get it to work sorry </p>

<p>any more tips would be great ill carry on working on this project till i am happy with it.</p>

<p>also is there a better way to write:</p>

<pre><code>if ($slideNumber == 1) {
    $('#prev').attr("class", "not_active")
    $('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
    $('#next').attr("class", "not_active");
    $('#prev').attr("class", "active");
}
else {
    $('#prev').attr("class", "active")
    $('#next').attr("class", "active")
};
</code></pre>

<p>Jquery full:</p>

<pre><code>$(document).ready(function () {

    ////////////////////////////  INITAL SET UP  /////////////////////////////////////////////

    //Get size of images, how many there are, then determin the size of the image reel.
    var divWidth = $(".window").width();
    var divSum = $(".slide").size();
    var divReelWidth = divWidth * divSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({ 'width': divReelWidth });

    //set the initial not active state
    $('#prev').attr("class", "not_active");

    ////////////////////////////  SLIDER  /////////////////////////////////////////////

    //Paging + Slider Function
    rotate = function () {
        var triggerID = $slideNumber - 1; //Get number of times to slide
        var image_reelPosition = triggerID * divWidth; //Determines the distance the image reel needs to slide
        //sets the active on the next and prev
        if ($slideNumber == 1) {
            $('#prev').attr("class", "not_active")
            $('#next').attr("class", "active")
        }
        else if ($slideNumber == divSum) {
            $('#next').attr("class", "not_active");
            $('#prev').attr("class", "active");
        }
        else {
            $('#prev').attr("class", "active")
            $('#next').attr("class", "active")
        };
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500);
    };

    ////////////////////////////  SLIDER CALLS  /////////////////////////////////////////////

    //click on numbers
    $(".paging a").click(function () {
        $active = $(this); //Activate the clicked paging
        $slideNumber = $active.attr("rel");
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });


    //click on next button
    $('#next').click(function () {
        if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
            var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
            var slideNumberOn = (left_indent / divWidth);
            var slideNumber = ((slideNumberOn * -1) + 1);
            $slideNumber = slideNumber;
            if ($slideNumber &lt;= divSum) { //do not animate if on last slide
                rotate(); //Trigger rotation immediately
            };
            return false; //Prevent browser jump to link anchor
        }
    });

    //click on prev button
    $('#prev').click(function () {
        if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
            var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
            var slideNumberOn = (left_indent / divWidth);
            var slideNumber = ((slideNumberOn * -1) - 1);
            $slideNumber = slideNumber;
            if ($slideNumber &gt;= 1) { //do not animate if on first slide
                rotate(); //Trigger rotation immediately
            };
        }
        return false; //Prevent browser jump to link anchor
    });

    //URL eg:www.hello.com#one                  
    var hash = window.location.hash;
    var map = {
        one: 1,
        two: 2,
        three: 3,
        four: 4
    };
    var hashValue = map[hash.substring(1)];
    //animate if hashValue is not null
    if (hashValue != null) {
        $slideNumber = hashValue;
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    };
});
</code></pre>
