Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Time for action — adding pagination controls

Next, we want to set up the function that will create the next button, previous button, and pagination buttons and makes them work.

The jCarousel plugin provides a key called initCallback that will allow us to pass in the name of a function that should be called when the carousel is created. Let's get started by creating an empty function and calling it:
```
var slider = $('#featured-carousel'),
function carouselInit(carousel) {
// Our function goes here
}
$(document).ready(function(){
slider.jcarousel({
scroll: 1,
buttonNextHTML: null,
buttonPrevHTML: null,
initCallback: carouselInit	
});
});
```
Whatever actions we write inside of our carouselInit() function, it will be executed when the carousel is initialized or set up. Since any page numbers and previous and next buttons would only be functional if JavaScript is enabled, we want to create those buttons dynamically with JavaScript rather than coding them in our HTML. Let's take a look at how we can create a list of page links to each slide in the slider.
We'll get started by getting all of the slides in our slider. Remember that our slider is an unordered list and each slide in the slider is an individual list item in the list. Since we've already saved a reference to the slider itself, we can get all the slides inside of it as follows:
```
function carouselInit(carousel) {
var slides = slider.find('li'),
}
```
We'll use these slides in a moment to create the page numbers. In the meantime though, we need a place to put our page numbers, so let's create a couple of containers before the slider so that our pagination will display just above the slider. Here's how we insert two nested<div> tags just before the slider:
```
function carouselInit(carousel) {
var slides = slider.find('li'),
slider.before(''),
}
```

Next, we'll need to refer to these two newly created containers a couple of times in our code, so we'll store references to them in variables as shown in the following code:

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'),
}

Now, we're going to get fancy and create a page number for each slide in the slider. The following is the code we'll add:
```
function carouselInit(carousel) {
var slides = slider.find('li'),
slider.before(''),
var controls = $('#page-controls'),
var pages = $('#pages'),
for (i=1; i<=slides.length; i++) {
pages.append('<a href="#">' + i + '</a>'),
}
}
```
We're starting with i = 1, because the first page number will be 1. Then we're checking to see if i is less than or equal to the number of slides (slides.length is the number of slides). If i is less than or equal to the number of slides, we're going to increment i by one number—basically we're going to add 1 to i and i++ is a JavaScript shortcut way of saying i = i+1.
Each time through the loop, we're going to append a link to the pages container we created. It's a link wrapped around a page number, and i represents our page number.
If you refresh the page in a browser at this point, you'll see numbers 1 to 12 linked above the slideshow. They aren't styled, and clicking on them won't do anything, because we haven't set that up yet—that's what we'll do next.
Next, we want to style the links so that they look the way we'd like. Open up your styles.css file and add these few lines to the CSS:
```
#page-controls { line-height:25px;height:25px; }
#page-controls a { margin:0 4px 0 0;padding:0 5px;border:1px solid #859900; }
#page-controls a:hover { border-color: #D33682; }
#page-controls a.current { color:#333;border-color:#333; }
```
This sets the height for our slider controls row to the 25 pixels that we allowed for it previously. Then we put a green border around each link, which will turn to a pink border when the link is hovered over. We adjusted margins and padding to get a nicely spaced row of boxes. Finally, we added a .current class for our links to allow us to mark the currently selected link in dark gray.

Okay, we have our page numbers added to our document, so all we have to do is make them work. We'll bind a click function to those links, since we want something to happen when our site visitor clicks on the links. We'll get started as follows:

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(){
//click code will go here
});
}

The first thing to do inside our function is to cancel the default action of the click so that the browser doesn't try to do its own thing when the links are clicked.

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(){
return false;
});
}

The jCarousel plugin offers us a nice way to scroll to a particular slide in the slider. It looks as follows:
```
carousel.scroll($.jcarousel.intval(number));
```
The numbers near the end is where we would pass in which slide we want to scroll to. For example, if we wanted to scroll to the sixth slide, we'd say:
```
carousel.scroll($.jcarousel.intval(6));
```
In our case, the number slide we want to scroll to is the page number in our link. For example, if I click on the following link:
```
<a href="#">3</a>
```
That means I want to scroll to the third slide in the slider. I can get that number by using jQuery's text() method as follows:
```
pages.find('a').bind('click', function(){
carousel.scroll($.jcarousel.intval($(this).text()));
return false;
});
```
If I click on the fourth link, $(this).text() will be equal to 4; on the seventh link, it will be equal to 7, and so on.
Refresh the page in the browser, and you'll see that clicking on a numbered link will scroll the slider to that slide.
Clicking on the page numbers, you probably noticed that the current page number isn't highlighted in the pagination. We already wrote the CSS to highlight a link that has the current class—now we just have to be sure we're adding that class to the current link. Here's how we'll do that.
```
pages.find('a').bind('click', function(){
carousel.scroll($.jcarousel.intval($(this).text()));
$(this).addClass('current'),
return false;
});
```
Now if you refresh the page in the browser, you'll see that clicking a page number applies the current class CSS to the link, highlighting it. However, clicking a second page number highlights that link in addition to the previous link. We have to make sure that we're removing the class from the old link too. Add the following line to take care of that:
```
pages.find('a').bind('click', function(){
carousel.scroll($.jcarousel.intval($(this).text()));
$(this).siblings('.current').removeClass('current'),
$(this).addClass('current'),
return false;
});
```
This line checks all of the links' siblings for any that might have the class of current. If it finds any, it removes the class.
Now, we just have to make sure the first link is highlighted when the carousel is initialized. The easiest way to do that is to simply click the first link in the pagination when the carousel is created, as follows:
```
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();
```
Remember that jQuery allows us to chain methods—even though we've got a whole function written inside the bind() method, we can still chain the next method to the end of it. We call the filter() method to narrow down the list of links to just the first one, then call the click() method to fire off the click function we just bound to the link.
Now if you refresh the page in the browser, you'll see that the first link is highlighted with our current class CSS.

Next and previous buttons

Now we've got our slider set up and page numbers working, but we also want to have simple next and previous buttons to make it easy to flip through the slides one at a time. We'll add those at either end of the pagination controls.

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

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

Table of Contents for Time for action — adding pagination controls

Create new playlist

Sign In

Sign Up

Time for action — adding pagination controls

Next and previous buttons

Table of Contents for
Time for action — adding pagination controls