How to make css jQuery thumbnail slides loop - css

Question

So I made this: http://jsfiddle.net/RaV3u/5/
...but haven't been able to figure out how to make the slides loop -- that is, when the last slide finishes, it continues from the first, and the same for the first slide going backwards.
Does anyone have an idea how to do this?
/* THUMBNAIL SLIDER IMAGES
------------------------------------------- */
.slideshow {
height: 200px;
position: relative;
overflow: hidden;
}
.images {
position: absolute;
left: 0; /* Change this value to slide */
top: 0;
height: 100%;
width: 300%;
z-index: -1; /* send this layer behind the .circle layer */
}
/* THUMBNAIL SLIDER NAVIGATION
------------------------------------------- */
.thumb-slide-nav-wrapper {
margin: 70px 15px; /* position of the nav buttons */
overflow:auto;
}
.circle-left {
/* position of the nav buttons */
float:left;
}
.circle-right {
/* position of the nav buttons */
float:right;
}
.circle {
/* nav buttons */
z-index: 1;
border-radius: 50%;
width: 60px;
height: 60px;
background: green;
}
a .circle:hover {
background: lightgrey;
}
Thanks.

Answer 1

Demo
In Your JavaScript Just check whether the end (first or last image) is reached before sliding it.
To get total count of images use: var tot=$(".images").find("img").length;
and use a counter variable i to check the direction of sliding and end image reached or not condition.
So here is your changed JS/JQuery:
$(document).ready(function() {
var tot=$(".images").find("img").length; //total images in slider nav
var i=0; //acts as a counter
var thumbSliderPos = $(".images").css("left");
// Detect thumbnail nav button clicks
$('#circle-left').click(function() {
//Detect if first image is reached?
if(i<=0){
i=tot-2;
$(".images").animate({
"left": "-="+(400*i),
}, 400);
//Yes Show last image
}
else
{
$(".images").animate({
left: "+=400",
}, 400);
i--;
}
});
$('#circle-right').click(function() {
//Detect if last image is reached?
if(i>=tot-2)
{
$(".images").animate({
left: "0",
}, 400);
i=0;
//Yes Show first image
}
else
{
$(".images").animate({
left: "-=400",
}, 400);
i++;
}
});
});
To make it autoSlide after page loads Here is another:
Demo
Hope it Helps you. Cheers :) !