Sliders and Carousels are one of the coolest ways to display information on websites. They can contain tons of information in a smaller area, and the animation of automatic sliding and the large, beautiful images that are usually included draw the user’s attention. Well, I’ll show you how to set up an awesome carousel with jQuery and the Roundabout plugin.
Generally, the words “slider” and “carousel” refer to the same thing. To me, however, a carousel is actually a specific type of slider that shows the slides moving in what seems to be a 3D circle (like a real-life carousel). In this tutorial I’m showing off a carousel that meets my definition.
At my job, I’ve been working on a project where I designed what the Carousel would look like and all of the features it would need before I looked around to see if I could even find a plugin with all of these features. Well, the design got approved, so it NEEDED to have these features. So I started looking, and then kept looking, and then there was some more looking (you know how it is). Nothing satisfied all of my requirements. So I just decided to use the jQuery plugin that had at least the core functionality working exactly how I wanted it to be and had some features for extensibility.
So what you’ll be reading about is how I made that plugin do more than it said it could, so that I could have exactly what I wanted. Aside from the images and text being used, the code you’ll see in the examples is exactly the same thing I’m using in my project for work.
Demo and Download have been removed
Now we need the code that will be turned into the carousel. We’ll have 7 slides, each of which is just an image. You can use any tags here, but make sure that all of the slides are direct children of the container.
This is all the HTML code that we need right now, so let’s make this carousel spin.
I still had to set one option because, by default, the plugin is looking for
li elements to be the slides, but I opted for minimal markup without the
li tags, so I had to set the selector to
"img". If you’d prefer to use the
li tags around your images, then you need to make sure you set the height and width of the images to
100% in your CSS, because otherwise the list items will be shrunk, but the images won’t be; they’ll just extend outside of their container.
In the end, I needed a few more options (though not many) so that I could have the carousel animate itself automatically without user intervention. Here’s the code with all of my options:
If you don’t understand what an option does, you can look it up on the Roundabout Project page.
Below the focused slide – and only the focused slide – I needed some text that describes the slide and has a link to a site that gives even more details. There are numerous ways to solve this problem, and there are some smart people out there that might say that my solution to this wasn’t the best, but there are reasons why I chose this solution over the others, and that reason isn’t important for you to know and doesn’t pertain to this tutorial, so I’ll leave it out.
Once again, we need some more HTML code. It’s just an unordered list of all the descriptions. The first list item matches up with the first slide, the second item goes with the second slide, etc. Note that one of the
li tags has the “current” class applied to it. In the CSS all of the list items are invisible except for the one with the current class. This is how I only show the description for the focused slide.
When a slide becomes the front slide, Roundabout fires off the “focus” event on it, so we hook a listener onto the slide images (using delegation, of course, because it’s cooler that way). So, when a new slide gets focused, we check to see which slide is in focus by using Roundabout’s
getChildInFocus function. We then remove the “current” class from all of the descriptions, and then add the “current” class onto the description at the same index as the current slide.
The plugin comes with the ability to easily add “Next” and “Previous” buttons for controlling the carousel (see the plugin documentation), but I wanted some very different controls. I wanted a button for each slide that we can click on to take us directly to that slide. I also wanted the button for the current slide to be highlighted, so we’re back to adding the “current” class onto one of them.
So, we need to add some additional code to that
focus event handler in order to update the correct button to have the “current” class as well:
It’s pretty straightforward. I just did the same thing to the controls that I did to the descriptions. Notice, though, that instead of having a separate statement for clearing the “current” class of all of the buttons, I just added the controls and descriptions together into one jQuery object and removed the class from all of them at once. Also notice that I’m caching the jQuery objects right away, just like I recommended in my previous post titled 3 Simple Things to Make Your jQuery Code Awesome.
Now all we have to do is make it so that when you click the controls, it changes slides. For this we add a click handler to the buttons.
Basically what we’re doing is looping through all of the controls to get the index of the control that was clicked by comparing
this, which is the control that was clicked, with each of the controls. You probably don’t need to wrap those last three statements in an
if statement, but you never know what might happen (You could also use the tilde in that conditional, like I talk about in my post about the tilde).
You’ll notice that 2 of the last 3 statements move the “current” class to the button that you clicked. This isn’t entirely necessary because the last statement, which uses the method built into the plugin to make the specified slide be the current one, will also cause the focus event to be triggered on that slide, so the event handler that we made earlier will handle changing the current control. The reason I’m setting the current control in this event handler is because the focus event doesn’t fire until the animation is finished, so there is a delay between the time that the button is clicked and the time that it gets marked as the current button.
That’s it! There is definitely a bunch of CSS that I didn’t mention, but you can see it and all of the other code working in tandem by clicking the demo button below. You can also download all of the resources (scripts, HTML, and images) in a zip file so you can set it up and play with it yourself on your own computer. I hope you enjoyed this tutorial and look forward to Thursday’s post discussing one of jQuery’s lesser known functions. Happy Coding!