Prevent scrolling past a certain point

Prevent scrolling past a certain point

I am trying to make a scrolling carousel, unlike other carousels this one
doesn't jump from slide to slide but only allows the user to slowly move
through them horizontally at a rate of 50px.
http://codepen.io/anon/pen/pyLfz
Problem is when clicking next, once the number 6 box comes into full view
the script should not allow the user to go any further, same for when the
number 1 box is in full view and prev link is clicked, the user should not
be allowed to scroll back anymore.
Right now I can't figure out how to do that.
HTML:
<div class="carousel">
<div class="slide">
<article class="pod">1</article>
<article class="pod">2</article>
<article class="pod">3</article>
<article class="pod">4</article>
<article class="pod">5</article>
<article class="pod">6</article>
</div>
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>
CSS:
.carousel {
position: relative;
border: 1px solid red;
width: 250px;
height: 100px;
overflow: hidden;
}
.carousel .slide {
overflow: hidden;
position: absolute;
width: 600px;
}
.carousel .slide .pod {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: blue;
box-shadow: 0 0 18px white;
color: #fff;
float: left;
}
jQuery:
$('.next').on('click', function() {
$('.slide').animate({
left: '-=50'
});
});
$('.prev').on('click', function() {
$('.slide').animate({
left: '+=50'
});
});