title: How to Make My Waterwheel Carousel Auto Play?
body: <p>I have this script and I want to add an auto play mod. This is the start:</p>
  
  <pre><code>$(document).ready(function () {
      var carousel = $("#carousel").waterwheelCarousel({
        flankingItems: 3,
        movingToCenter: function ($item) {
          $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '&lt;br/&gt;');
        },
        movedToCenter: function ($item) {
          $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '&lt;br/&gt;');
        },
        movingFromCenter: function ($item) {
          $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '&lt;br/&gt;');
        },
        movedFromCenter: function ($item) {
          $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '&lt;br/&gt;');
        },
        clickedCenter: function ($item) {
          $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '&lt;br/&gt;');
        }
      });
  </code></pre>
  
  <p>Here are the navigation buttons:</p>
  
  <pre><code>    $('#prev').bind('click', function () {
        carousel.prev();
        return false
      });
  
      $('#next').bind('click', function () {
        carousel.next();
        return false;
      });
  
      $('#reload').bind('click', function () {
        newOptions = eval("(" + $('#newoptions').val() + ")");
        carousel.reload(newOptions);
        return false;
      });
  
    });
  </code></pre>
  
  <p>Can anyone please help me to do that?</p>
  
  <p>And here is my <code>css</code> code:</p>
  
  <pre><code>body {
      font-family:Arial;
      font-size:12px;
      background:#ededed;
  }
  .example-desc {
      margin:3px 0;
      padding:5px;
  }
  
  #carousel {
      width:960px;
  
      height:300px;
      position:relative;
      clear:both;
      overflow:hidden;
  }
  </code></pre>
  
  <p>Hide images until carousel can handle them, otherwise it's not as obvious items can be clicked:</p>
  
  <pre><code>#carousel img {
      visibility:hidden; 
      cursor:pointer;
  }
  
  .split-left {
      width:450px;
      float:left;
  }
  .split-right {
      width:400px;
      float:left;
      margin-left:10px;
  }
  #callback-output {
      height:250px;
      overflow:scroll;
  }
  textarea#newoptions {
      width:430px;
  }
  </code></pre>