Welcome to WebmasterWorld Guest from 34.201.121.213

Forum Moderators: open

Message Too Old, No Replies

How to Loop Image Slider

     
7:06 am on Feb 22, 2012 (gmt 0)

New User

5+ Year Member

joined:Feb 19, 2012
posts: 8
votes: 0


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!
5:06 pm on Feb 22, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


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.
6:24 pm on Feb 22, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


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);
}
8:06 pm on Feb 22, 2012 (gmt 0)

New User

5+ Year Member

joined:Feb 19, 2012
posts: 8
votes: 0


Thank you Fotiman! That worked perfectly!