Now all that's left to add is a next and a previous button.
We'll add the previous button at the beginning of the pagination, and the next button at the end. Here's how we can use jQuery to insert those links in our document:
function carouselInit(carousel) { var slides = slider.find('li'); slider.before('<span id="page-controls"><span id="pages"></span></span>'); var controls = $('#page-controls'); var pages = $('#pages'); for (i=1; i<=slides.length; i++) { pages.append('<a href="#">' + i + '</a>'); } pages.find('a').bind('click', function(){ carousel.scroll($.jcarousel.intval($(this).text())); $(this).siblings('.current').removeClass('current'); $(this).addClass('current'); return false; }).filter(':first').click(); controls.prepend('<a href="#" id="prev">«</a>'); controls.append('<a href="#" id="next">»</a>'); }
I...