We have a list of all of our speakers right now, and they're just in sequential order. I want to use a library that's going to allow me to create a carousel so that I show only one of these and they rotate after a period of time. I'm going to use something called jQuery Cycle. If you want to learn more about jQuery Cycle, take a look at my series View Source on the lynda.com online training library. At the very bottom of the screen, we have, on Week Two, this lesson on creating a photo rotator with jQuery Cycle. I'm going to show you how to do it right here though.
jQuery Cycle is a plugin for jQuery that lets you do a lot of different effects as well as rotate a series of div elements. We've already loaded the script. It's right over here. We're going to need to modify our function to use jQuery Cycle to rotate the things that we've loaded in with the getJSON. We're going to add a script right here, and it's going to be pretty simple. What we'll do is we'll go ahead and target the carousel that we created up here, and we'll load up the cycle function--that's the jQuery Cycle function--and that is going to take an object as a parameter.
This carousel is this element right here, and in our page we've already loaded all this HTML onto it. We're going to pass a lot of parameters here. First, it's going to be the fx, and the fx that we're going to use is called fade. If you take a look at this page, you can see a list of all the effects you have available to you. You can click on any one of these to preview what the effect is going to look like. We'll also pass a pause element here, and we'll set the pause to 1. Pause is going to stop the rotation if I hover over the main element that has all these items.
Now, if we want to find out what all the different options for jQuery Cycle are, you can go to this page and you can see all the different options are listed right here with what they do. So let me try some more. I'm going to specify a next button, so I'm going to type in next and then put a pound sign and put a next_btn. That's going to allow people to go ahead and click on the buttons to navigate forwards and backwards in our list. Of course, we're going to need a previous button, and I'll have to type in the HTML for that in a second.
Finally, we're going to put in two more things: our speed, which is the speed of the transition-- I'll set that to 500--as well as the timeout, and that is the amount of time between the transitions. This one doesn't need a comma because it's the last element of the object, and I'll go ahead and hit Save. I'll need to come up here and type in the links for my buttons. They're going to be a href, just a regular link, and I'm going to put that special left double arrow character. And pretty much the same thing for my next button: it's just going to have the arrow facing the other way.
Let me go ahead and save this, and I'll come right here and I'll refresh, and you'll see that only one item is showing. Let me make sure my mouse is away from that element, and it should rotate after a few seconds. There's the next one, and I can use these buttons right here to go forwards and backwards through the items. It doesn't look very good right now, but it does have the functionality that we need to make this a carousel rotator. I'll show you how to style it in the next movie.
- What is JSON?
- Creating simple data
- Communicating across sites with JSONP
- Rotating with jQuery Cycle