O'Reilly logo

jQuery for Designers Beginner's Guide by Natalie MacLees

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required