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();
controls.prepend('<a href="#" id="prev">&laquo;</a>'),
controls.append('<a href="#" id="next">&raquo;</a>'),
}

    I've used the prepend() method to insert the previous button before the page numbers and the append() method to insert the next button after the page numbers.

    If you refresh the page in the browser, you'll see the next and previous buttons show up along with our pagination buttons.

    Time for action — adding next and previous buttons

    However, clicking them won't cause anything to happen—we have to hook up those buttons so that they work. Let's start with the next button.

  2. Just like with the pagination buttons, we need to bind a click event. Again, the jCarousel plugin provides a nice way for us to advance to the next slide.
    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">&laquo;</a>'),
controls.append('<a href="#" id="next">&raquo;</a>'),
$('#next').bind('click', function() {
carousel.next();
return false;
});
}

    We're selecting the next button and binding a click event. We're canceling the browser's default action so that the browser doesn't attempt to do anything when the link is clicked. Then, all we have to do is call carousel.next() and jCarousel will take care of advancing to the next slide for us.

    Refresh the page in the browser, and you'll see that clicking the next button advances the slider by one slide.

    You'll also notice, however, that the currently highlighted page in the pagination isn't updated. Let's take a look at how we can take care of that.

  3. We'll get started by finding the currently highlighted page number as follows:
    $('#next').bind('click', function() {
carousel.next();
var current = pages.find('.current'),
return false;
});

    Here we're just looking inside our page numbers to find the one with the current class.

  4. Next, we'll remove the current class, move to the next page number link, and add the current class to that one as follows:
    current.removeClass('current').next().addClass('current'),

    Ah, but not so fast, we only want to do that if there is a next link to go to. If there's not, then we don't want to do anything at all. If we check current.next(). length, we can tell if there's a next link or not. So, we just have to wrap this bit of code in an if statement as shown in the following code: 

    if ( current.next().length ) { current.removeClass('current').next().addClass('current'), }

    Now if you refresh the page in a browser, you'll see that the next button works as expected. When we get to the last page, it does nothing, just as we'd expect.

  5. Now we'll repeat that whole process with the previous button the function is very similar. The following is what it will look like:
    $('#prev').bind('click', function(){
carousel.prev();
var current = pages.find('.current'),
if ( current.prev().length ) { current.removeClass('current').prev().addClass('current'), }
return false;
});

    Here's what our complete carouselInit() function looks like: 

    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">&laquo;</a>'),
controls.append('<a href="#" id="next">&raquo;</a>'),
$('#prev').bind('click', function(){
carousel.prev();
var current = pages.find('.current'),
if ( current.prev().length ) { current.removeClass('current').prev().addClass('current'), }
return false;
});
$('#next').bind('click', function() {
carousel.next();
var current = pages.find('.current'),
if ( current.next().length ) { current.removeClass('current').next().addClass('current'), }
return false;
});
}

    Now if you refresh the page in a browser, you'll see that the next and previous buttons are both working as expected, along with the page numbers. You can navigate to any slide in the slider by using these external controls.

    Time for action — adding next and previous buttons

What just happened?

We set up jCarousel to display a single slide at a time. We made sure that jCarousel was not creating its own next and previous buttons. We used jQuery to add next, previous, and pagination buttons to our document, and then used jCarousel's helpful methods to control the carousel from these external controls. We made sure the currently displayed slide is highlighted in the pagination to make it easy for our site visitors to see where they are in the slides.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.134.78.106