ansaurus

Question

Answer 1

A:

Wrap your click in an if statement that checks if the current position is equal to the number of slides:

if( currentPosition <= numberOfSlides ){
    $(".controls").bind('click',function(){
    $(".slider").animate({left:-slideWidth*(currentPosition)},{duration:800,easing:'easeInOutCubic'});
    currentPosition++;
  });
}

hookedonwinter 2010-08-16 17:48:29

Considering he's setting the "currentPosition" equal to 1 at the beginning, the conditional check will need to be == instead of <.

treeface 2010-08-16 17:51:00

ah good catch. thanks. Going to use <=.

hookedonwinter 2010-08-16 17:51:54

I've tried this but it doesn't seem to work :/

Matthew Ruddy 2010-08-16 18:18:43

You can see for yourself here :http://matthewruddy.com/jquery-sliderAlso for some reason it doesn't seem to be working on any other browser except IE8 for me. Can anyone confirm this? I don't have a clue why..

Matthew Ruddy 2010-08-16 18:25:21

Any reason you're using background images? Just curious.

hookedonwinter 2010-08-16 18:27:43

Matthew Ruddy 2010-08-16 18:31:24

@Matt...I just looked at your JS...think about the conditional. You now have it set to startingPosition = 0 and you check startingPosition <= length. This means it'll get up to 500 (the end) and animate once more after that. If you set startingPosition = 0, you want to say startingPosition < length. If you set it equal to 1, you want to say <= length.

treeface 2010-08-16 18:45:28

Ok, I think I've found the problem here. You're setting your LIs to display inline and you're using background image. This means that since it's inline, it's looking for the element's content to determine the width and height, so it doesn't consider the width and height in CSS. You need to set it to display:block if you want to set the width and height, and float:left if you want the lis to be stacked off to the right.

treeface 2010-08-16 18:49:34

Ok. I've done as you've said however the it still doesn't stop at the last image.. Check the site to see what I have changed..

Matthew Ruddy 2010-08-16 18:59:26

You have to put the conditional statement *inside* the anonymous function. It has to check if it's on the last position every time it performs the click event. Right now you're only performing the check once on the pageload when currentPosition is 0.

treeface 2010-08-16 21:20:00

Answer 2

A:

Have you tried a simple conditional? It seems you have all the pieces there...just ask if the currentPosition is equal to the length of the slides array before you do the animate.

treeface 2010-08-16 17:49:44

I've tried this but it doesn't seem to work..

Matthew Ruddy 2010-08-16 18:35:32

Answer 3

+1 A:

Here's my code & Demo : http://jsbin.com/ixoqu3

The Basic rule is restrict the animation when the

1) (current Image index) * (Image width) of the slider is greater than total width
2) (current Image index) * (Image width) of the slider is less than 0 (zero)

The following JavaScript Code tells the same, Check out the Working Demo

HTML :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<meta charset=utf-8 />
<title>Hello world !!</title>
  <style type="text/css">
    body{
      background:#000;
      color:#fff;
    }
    #slider {
      padding:0px;
      margin:0px auto;
      overflow:hidden;
      width:500px;
      border:10px solid #d5d5d5;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      -moz-box-shadow:0px 0px 20px #f0f;
      -webkit-box-shadow:0px 0px 20px #f0f;
      box-shadow:0px 0px 20px #f0f;
    }
    ul {
      padding:0px;
      margin:0px;
      position:relative;
      list-style:none;
     }
    li {
      float:left;
      padding:0px;
      margin:0px;
    }

    #nav {
      margin:0px auto;
      width:200px;
    }
    span{
      padding:10px;
      background:#3f3f3f;
      color:#fff;
      font:bold 16px verdana;
      -moz-border-radius:10px;
      border:1px solid #fff;
      -moz-box-shadow:0px 0px 30px #0099f9;
      -webkit-box-shadow:0px 0px 30px #0099f9;
      box-shadow:0px 0px 30px #0099f9;
      cursor:pointer;
    }
    #num {
      padding:5px;
      background:#000;
    }
    </style>

</head>
<body>
  <div id="slider">
    <ul>
      <li>
        <img src="http://www.autoblog.com/media/2006/05/cars-movie.png"/&gt;
      </li>

      <li>
        <img src="http://www.mediabistro.com/fishbowlLA/original/carpass.jpeg.jpg"/&gt;
      </li>

      <li>
        <img src="http://disney-clipart.com/Cars/Disney-Cars-McQueen.jpg"/&gt;
      </li>

      <li>
        <img src="http://www.cargurus.com/blog/wp-content/uploads/2009/01/cars-lightning-mcqueen.jpg"/&gt;
      </li>
      <li>
        <img src="http://www.grahammilton.com/folio/folio_cars1.jpg"/&gt;
      </li>      
    </ul>
  </div>
  <br /><br />
  <div id="nav"
    <span id="prev"> Prev </span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="next"> Next </span>
      <br /><br /><br />
      Slide number : &nbsp;&nbsp;<span id="num">1</span>
  </div>
</body>
</html>

JavaScript :

  var img_width = 500;
  var img_height = 250;
  var slide = 0;
  var speed = 500;
  var size = 0;
$(document).ready(function() {

  size = $('#slider').find('img').length;

  $('#slider').find('ul').width(img_width * size).height(img_height);
  $('#slider li, #slider img').width(img_width).height(img_height);

  $('#next').bind('click',function() {
    if(slide > img_width * (size - 1) *(-1)) {
          slide -= img_width;
         slider(slide);
    }
  });
  $('#prev').bind('click',function() {
     if(slide < 0) {
      slide += img_width;
        slider(slide);
    }
  });
});

function slider(slideMargin) {
  $('#slider ul').stop().animate({'left':slideMargin}, speed ,function(){
      $('#num').text(Math.abs(slideMargin/ (100 *size)) + 1);
  });
}

Ninja Dude 2010-08-21 08:12:52

ansaurus

tags:

views:

answers:

Image slider; stop at last image

related questions