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

Get jQuery for Designers Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.