Fixing Slider

I’m trying to figure out how i can set the slider to stop at the last item. Basically the slider still slides to left even though their aren’t anymore items to follow. Here is the link to my site.

The slider is located below the video presentation. Here is my code

<script type="text/javascript">
$(document).ready(function(){
    
	var $item = $('div.slider_post'),
	    visible = 1,
		index = 0,
		endIndex = ( $item.length / visible ) -1
		
	$('input#slide_left').click(function(){
	    if(index < endIndex ){
		    index++;
			$item.animate({'left':'-=235px'});
		}
	});
		
	$('input#slide_right').click(function(){
	    if(index > 0){
		    index--;
			$item.animate({'left':'+=235px'});
		    }
	 });
});
</script>

Hi there,

I saw your post on SO, so for the sake of completeness I’ll post the solution here, too:

You are calculating the width of your slides incorrectly, as you are neglecting the margin.

Either hard code them, or determine the width programatically:

var w = $item.outerWidth( true );

$item.animate({'left':'-=' + w + 'px'});
$item.animate({'left':'+=' + w + 'px'});

Also, to have the slide stop at the last slide, you will have to change your end index variable.

You can either hard code this as 5, or do it programatically:

endIndex = $item.length - Math.floor($(".slide_post").width()/w);

Here’s everything together:

var $item = $('div.slider_post'),
  w = $item.outerWidth( true ),
  visible = 1,
  index = 0,
  endIndex = $item.length - Math.floor($(".slide_post").width()/w);

$('input#slide_left').click(function(){
  if(index < endIndex ){
    index++;
    $item.animate({'left':'-=' + w + 'px'});

});

$('input#slide_right').click(function(){
  if(index > 0){
    index--;
    $item.animate({'left':'+=' + w + 'px'});
  }
});

Here’s a demo of it working.

If you have any other questions, just let us know :slight_smile: