How to Loop Image Slider

[agoodwin]

Im wondering if someone could tell me what I need to add to the following code so that when it reaches the last image, it starts back at the first. I know there are other codes out there that already do so, but I would prefer to use this one, first of all because it has a lot less code than most other slider codes, and also because it is already implemented and customized minus this one problem. I do not have much experience and therefore please treat me like I am stupid when you reply or I will have no idea what you are talking about. so... here is the code, again, I would like it to loop back to the first image once it has reached the final one.

<script type="text/javascript">
$(document).ready(function(){
 var currentPosition = 0;
 var slideWidth = 480;
 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">Clicking moves left</span>')
  .append('<span class="control" id="rightControl">Clicking moves right</span>');


 // Create event listeners for .controls clicks
 $('.control')
  .bind('click', function(){
  // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  
// 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
{ $('#leftControl').show() }
// Hide right arrow if position is last slide
{ $('#rightControl').show() }
 }
});
</script>

Thanks in advance!

[rocknbil]

Though this is an "incomplete" answer as I don't have time to code it out, consider

currentPosition+1 : currentPosition-1;

You'll need to figure out some way to reset currentPosition to it's original position.

My "slider" scripts are also custom for the same reason, but I generally take a different approach. I have the same static overflow: hidden "window," and as the images move out of that window they are popped off the front of the array and added onto the back (or, the inverse, for the other direction.) This allows it to be an infinite number of images and perpetually moving. It's completely different than what you have here.

[Fotiman]

Instead of this:

currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

Try this:

if ($(this).attr('id') == 'rightControl') {
  currentPosition = (currentPosition == (numberOfSlides - 1)? 0: currentPosition + 1);
}
else {
  currentPosition = (currentPosition == 0? (numberOfSlides - 1): currentPosition - 1);
}

[agoodwin]

Thank you Fotiman! That worked perfectly!