Right now, you're just telling the slides to move x pixels left or right based on the button the user clicks. One approach is to set a condition to check if the user is trying to go out of the boundaries of the slider.
JSFiddle: Link
First off, let's just create a variable to represent what slide we're viewing.
var slider = 0; // our default slide when we load the page
Now, let's say we click to move to the right:
if(slider != $("[id^=slider]").length - 1) {
So, slider = 0. $("[id^=slider]") gets all elements whose id begins with "slider". With .length, we get the length of the array returned by $("[id^=slider]"). Slides are numbered 0, 1, 2, 3. Subtract 1, since we started from 0. We have 4 slides - 1, which is 3. If we ever hit 3, we won't animate the slider anymore.
What about to the left? Well:
if(slider != 0) { // Simple, we don't go below 0, our first slide.
Now, in the JSFiddle, you'll see that we add or subtract one to slider after we animate the slide to keep track of where we are. You can check it out yourself to see it in action.
Another approach to take is keeping track of the position, which jmm beat me to explaining. You'll just have to utilize $("[id^=slider]").length * amount of pixels animated to ensure that if you ever add more slides in the future, you won't have to recalculate the maximum number of pixels to animate before the user hits the boundaries.