Add autoscroll to jquery slider

Question

I have this jQuery slider but, now I need to make it to automatically start sliding on the beginning. For now it only does on click sliding to the left or the right. Can anybody help me how to do that?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 960;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Кликни за лево</span>')
    .append('<span class="control" id="rightControl">Кликни за десно</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } 
});
</script>

and this is the html that I use:

 <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <img src="Images/banner/z1.png" alt="Добредојдовте во светот на децата!" />
      </div>
      <div class="slide">
        <img src="Images/banner/z2.png" />
      </div>
      <div class="slide">
        <img src="Images/banner/z3.png"/>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

Answer 1

Put the slider in a seperate function:

var slideGo = function(elem){
    // Determine new position
    currentPosition = ($(elem).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });

Then call the function from the document ready handler, passing in a reference to the element:

$(document).ready(function(){
var elem = $('#myelement');
slideGo(elem);
});