calling a function works in once instance but not another
<p>I cant figure out for the life of me why the 2nd click the click next button does not trigger roate.</p>

<p>both $slideNumber will have a value of 1 2 3 or 4, and i have used alert to let me know that this is the case.</p>

<p>its basically not triggering the rotate(); in the 2nd one</p>

<p>the click numbers one works perfectly;</p>

<pre><code>//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


    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500);
};

//click on numbers (this one works)
$(".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 (this one does not work)
$('#next').click(function () {
    var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
    var slideNumberOn = (left_indent / divWidth);
    var slideNumber = ((slideNumberOn * -1) + 1);
    $slideNumber = slideNumber;
    rotate(); //Trigger rotation immediately
    return false; //Prevent browser jump to link anchor
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="paging"&gt;
                &lt;a href="#" rel="1"&gt;one&lt;/a&gt;
                &lt;a href="#" rel="2"&gt;two&lt;/a&gt;
                &lt;a href="#" rel="3"&gt;three&lt;/a&gt;
                &lt;a href="#" rel="4"&gt;for&lt;/a&gt;
            &lt;/div&gt;

            &lt;div class="nav"&gt;
                &lt;a id="prev" class="active" href="#"&gt;prev&lt;/a&gt;
                &lt;a id="next" class="active" href="#"&gt;next&lt;/a&gt;
            &lt;/div&gt;
</code></pre>
