$(document).ready
  (
    function()
    {
      // put last item left of first item
      $('#carousel_ul li:first').before($('#carousel_ul li:last'));
    }
  );


  function goLeft ()
  {
    // get width of items
    var item_width = $('#carousel_ul li').outerWidth() + 26;
    // calculate the left indent
    var left_indent = parseInt($('#carousel_ul').css('left')) + item_width-26;
    $('#carousel_ul:not(:animated)').animate({'left' : left_indent},750,function()
    {
      // move last item before first item
      $('#carousel_ul li:first').before($('#carousel_ul li:last'));
      // set left indent "-item_width"
      $('#carousel_ul').css({'left' : -item_width });
    });
  };



  function goRight ()
  {
    // get width of items
    var item_width = $('#carousel_ul li').outerWidth() + 26;
    // calculate the left indent
    var left_indent = parseInt($('#carousel_ul').css('left')) - item_width+26;
    // make the sliding effect
    $('#carousel_ul:not(:animated)').animate({'left' : left_indent},750,function()
    {
      // move first item behind last item
      $('#carousel_ul li:last').after($('#carousel_ul li:first'));
      // set left indent "-item_width"
      $('#carousel_ul').css({'left' : -item_width });
    });
  };