I am creating multiple sliders in a page... but not getting the correct stop position if the number of slides are different from each other

I am creating multiple sliders in a page... but not getting the correct
stop position if the number of slides are different from each other

I am creating multiple sliders in a page... but not getting the correct
stop position if the number of slides are different from each other..
If I keep the number of slides same it works well..
But I need different number of slides in sliders...
$(document).ready(function(){
$('.myslider-wrapper').each(function(){
// thumbSlide
var countSlider = $('.thumbSlide').length;
if((".thumbSlide").length){
// Declare variables
var totalImages = $(".thumbSlide > li").length,
imageWidth = $(".thumbSlide > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round($(".thumbSlide-wrap").width() /
imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth/countSlider);
$(".thumbSlide").width(totalWidth+10);
$(".thumbSlide-prev").click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
if(parentMove.position().left < 0 &&
!$(".thumbSlide").is(":animated")){
parentMove.animate({left : "+=" + imageWidth + "px"});
}
return false;
});
$(".thumbSlide-next").click(function(){
var parentMove = $(this).parent().prev('.thumbSlide');
if(parentMove.position().left > stopPosition &&
!$(".thumbSlide").is(":animated")){
parentMove.animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
});
here is jsFiddle URL:
http://jsfiddle.net/mufeedahmad/GLSqS/