Jquery - Slideshow

// slideshow
 var currentPosition = 0;
 var slideWidth = 700;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 // Remove scrollbar in JS - It is added in CSS for user how does not have js enable
 $('.slidesContainer').css('overflow', 'hidden');
 // Wrap all .slides with #slideInner div
 slides // variable slides = .slide
 .wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});
 // Float left to display horizontally, readjust .slides width
 /* 
 Set #slideInner width equal to total width of all slides
 #slideInner wraps all of our slides that has a width equal to total width of all .slide div.
 */
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert left and right controls (with class names of .control) for user navigation;
    $('.slideshow')
      .prepend('<span class="control" id="leftControl">Move left</span>')
      .append('<span class="control" id="rightControl">Move right</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() }
      }
 
});