Is there a way of making this JQuery carousel work more efficiently?
<p>I have this code for a carousel widget, see below. </p>

<p><strong>Problem</strong>: The problem is that <code>&lt;ul&gt;</code> position doesn't always end up where it's supposed too. In Chrome the left position ends up as <code>left: -1247px;</code>...clearly wrong as the widget doesnt display anything.</p>

<p><strong>Question</strong>: Is there a way to write this widget more efficiently?</p>

<pre><code>//Initiate variable for the rotate() function and delay
    var run = setInterval('rotate()', 3800);    

    //Get the width of the DIV containing the unordered list
    var item_width = $('#featured-widget').width();

    //Minus 1 instance of the unordered list as it falls outside of #featured-widget
    var left_value = -item_width;

    //Move the last item before first item, just in case user click prev button
    $('#featured-widget li:first').before($('#featured-widget li:last'));

    //Set the default item to the correct position 
    $('#featured-widget ul').css({'left' : left_value});

    //Prev button
    $('#prev').click(function() {

        //Get the right position
        var left_indent = parseInt($('#featured-widget ul').css('left')) + item_width;

        //Animate the left position of the &lt;ul&gt; and rearrange the list items then reposition the &lt;ul&gt;            
        $('#featured-widget ul').animate({'left' : left_indent}, 800,function(){    

            $('#featured-widget li:first').before($('#featured-widget li:last'));
            $('#featured-widget ul').css({'left' : left_value});

        });

        //Cancel the link behavior so page doesn't jump            
        return false;

    });

    //Next button
    $('#next').click(function() {

        var left_indent = parseInt($('#featured-widget ul').css('left')) - item_width;

        $('#featured-widget ul ').animate({'left' : left_indent}, 800, function () {

            $('#featured-widget li:last').after($('#featured-widget li:first'));
            $('#featured-widget ul').css({'left' : left_value});

        });

        return false;

    });        

    //If mouse hover, pause rotate(), otherwise rotate it
    $('#featured-widget, #prev, #next').hover(function() { clearInterval(run);
        }, function() { run = setInterval('rotate()', 3800); 
    });

});

    //The rotate() function is called and triggers a click after the setInterval()
    //This gets the 'Featured Number Plates' widget to automate 
    function rotate() { $('#next').click(); } 
</code></pre>

<p>Any help is Greatly Appreciated, Thanks</p>
