Question

So I have this very simple (and probably not built the recommended way) image slider at my wordpress page that I built myself. My problem is that when the images run out, it will just slide whitespace, and so on. I want it to start sliding from the beginning, or just stop sliding at the last image. Here’s my code:
HTML:

<div id="gallery-wrap">
   <div id="gallery">
      <img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
      <img class="galleryimage2"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
      <img class="galleryimage3"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
      <img class="galleryimage4"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
   </div>
    <div id="gallery-controls">
      <a id="gallery-prev" href="#"><img alt="" /> </a>
      <a id="gallery-next" href="#"><img alt="" /></a></div>
    </div>
</div>

CSS:

#gallery-wrap{margin: 0 auto; overflow: hidden; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{position:absolute; width:100%; height:300px; top:0px;}
.galleryimage2{position:absolute; width:100%; height:300px; left:100%;top:0px;}
.galleryimage3{position:absolute; width:100%; height:300px; left:200%;top:0px;}
.galleryimage4{position:absolute; width:100%; height:300px; left:300%;top:0px;}

#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; }
#gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px;}

And the js/jquery

var position = 1; // you always start at the first image?
$(document).ready(function()
{
  $("#gallery-prev").click(function(){

    var nr_of_img = $('img', $('#gallery')).length;

    if (position == 1)
    { 
      // move all the way to the last image
      position = nr_of_img;
    }
    else
    {$("#gallery").animate({"left": "+=100%"}, "slow");
      // move to the previous image
      position--;
    }
  });

  $("#gallery-next").click(function(){

    var nr_of_img = $('img', $('#gallery')).length;

    if (position == nr_of_img)
    { 
      // move all the way to the first image
      position = 1;
    }
    else
    {$("#gallery").animate({"left": "-=100%"}, "slow");
      // move to the previous image
      position++;
    }
  });
});

So as you can probably see, I’m thinking what to put in the variables. How does the script know when the images run out? And as you can see, the images are absolutely positioned, that was the easiest way to get them all to the same horizontal line.
If anyone wants to see this in action:
http://wordpress.kotisivut.name/

Answer 1

Why don’t you count the amount of images in your slider…

var nr_of_img = $('img', $('#gallery')).length;

Then you can keep count of the number of moves you make from left to right etc and see if you ran out of images.

[Edit]

first of all your if-statements are at the wrong place. You want to do the if-statements in the event functions.

This would mean you would do something like this

var position = 1; // you always start at the first image?
$(document).ready(function()
{
  $("#gallery-prev").click(function(){
    var nr_of_img = $('img', $('#gallery')).length;

    if (position == 1)
    {
      // move all the way to the last image
      position = nr_of_img;
    }
    else
    {
      // move to the previous image
      position--;
    }
  });

  $("#gallery-next").click(function(){
    var nr_of_img = $('img', $('#gallery')).length;

    if (position == nr_of_img)
    {
      // move all the way to the first image
      position = 1;
    }
    else
    {
      // move to the previous image
      position++;
    }
  });
});