Sorgalla Jcarousel which you can find here is a great slider plugin but it lacked the neat paging at the bottom..So here’s a quick solution for it:
First start off with the css:
.jcarousel-navigation { list-style: none; position: relative; float: left; display: block; left: 50%; margin-top:2%;}
.jcarousel-navigation li{padding:0 5px 0 0; position: relative; float: left; display: block; right: 50%;}
.jcarousel-navigation li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0,0,0,0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
.jcarousel-navigation li.active a {
background: #000;
background: rgba(0,0,0,0.9);
cursor: default;
}
Now setting up the html, this plugin creates custom html once it’s rendered so I just inserted this after the ul list like so:
<ul id="mycarousel" class="jcarousel-skin-tango"> <li>Slide 1</li> <li>Slide 2</li> </ul> <!-- This is for the custom paging --> <ul class="jcarousel-navigation"> </ul>
Now for the magic of Jquery:
We need to have a count of total slides there are and store it in a variable to be used later:
var totalslides = 1;
As you can see in the UL navigation there are no “li” so this is loaded automatically by the amount of li’s in the main carousel like so:
$('#mycarousel li').each(function(){
$('.jcarousel-navigation').append('<li id="' + totalslides + '"><a href="#"></a></li>');
});
Now because we start “totalslides =1″ that’s just for the id value but that would be incorrect in later use so lets go ahead and subtract 1:
totalslides = totalslides - 1;
Now here’s the tricky part, this plugin has a setting which you can set to “circular” which means that it’s a continuos slide so the value it always adds 1 to each slide, so lets start off with creating a function that would return the right slide value:
function calcSlide(value){
current = value;
if(value > totalslides){
current = value - totalslides;
calcSlide(current);
}
return current;
}
Now having the right slide value we can control its navigation, first off by initiating the carousel like so:
$('#mycarousel').jcarousel({
wrap: 'circular', //continuos slide
scroll: 1, //goes one slide at a time
itemFirstInCallback: mycarousel_itemFirstInCallback, //detects visible slide
initCallback: mycarousel_initCallback //setup special functions to be set when initiating the carousel
});
So when initiating lets setup the navigation control:
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-navigation li a').click(function(e){
panel = $(this).parent('li').attr('id');
carousel.scroll(jQuery.jcarousel.intval(panel));
return false;
});
};
that will tie every href in the navigation ul to the slide.
Now when first slide is visible, lets setup the navigation:
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
bubble = calcSlide(idx);
$('.jcarousel-navigation li').each(function(){
if($(this).attr('id') == bubble)
$(this).addClass('active');
else
$(this).removeClass('active');
});
};
And there you go, now u have a good simple looking slider with the nice little circular navigation at the bottom and in case you’re confused with so much code broken up here’s the complete thing:
<script type="text/javascript">
var totalslides = 1;
function mycarousel_initCallback(carousel) {
jQuery('#viewvid').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(1));
pageslide('about');
return false;
});
jQuery('.jcarousel-navigation li a').click(function(e){
panel = $(this).parent('li').attr('id');
carousel.scroll(jQuery.jcarousel.intval(panel));
return false;
});
};
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
bubble = calcSlide(idx);
$('.jcarousel-navigation li').each(function(){
if($(this).attr('id') == bubble)
$(this).addClass('active');
else
$(this).removeClass('active');
});
};
function calcSlide(value){
current = value;
if(value > totalslides){
current = value - totalslides;
calcSlide(current);
}
return current;
}
jQuery(document).ready(function() {
$('#mycarousel li').each(function(){
$('.jcarousel-navigation').append('<li id="' + totalslides + '"><a href="#"></a></li>');
totalslides++;
});
totalslides = totalslides - 1;
$('#mycarousel').jcarousel({
wrap: 'circular',
scroll: 1,
itemFirstInCallback: mycarousel_itemFirstInCallback,
initCallback: mycarousel_initCallback
});
});
</script>
Here’s a quick snapshot of what the final result looks like:
Let me know what you think, hope this helps someone out 
