jQuery for Designers Beginner's Guide

Time for action – adding next and previous buttons

Now all that's left to add is a next and a previous button.

1. 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(); ...