Is there a way of making this JQuery carousel work more efficiently?

I have this code for a carousel widget, see below.

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

Question: Is there a way to write this widget more efficiently?

//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 <ul> and rearrange the list items then reposition the <ul>            
        $('#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); 
    });

});

   开发者_JS百科 //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(); } 

Any help is Greatly Appreciated, Thanks

have a look at this plugin maybe it may help :)

http://jquery.malsup.com/cycle/