JavaScript

How to Build a Custom Carousel With jQuery and Roundabout

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.

Terminology and Background

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

The Starting Markup

The first thing we need to do is download the Roundabout plugin, which is available on its project page. Next we need to write the HTML. What you see below is mostly just a normal HTML skeleton that includes the scripts we need, including the jQuery plugin you just downloaded. Obviously, the JavaScript is at the bottom of the page for performance reasons.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <title>Roundabout Test</title>
    <style rel="stylesheet" type="text/css" media="screen">
    /* Stylesheet goes here */
    </style>
</head>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.roundabout.min.js"></script>
<script type="text/javascript">
// Your Script Goes Here
</script>

</body>
</html>

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.

1
2
3
4
5
6
7
8
9
<div id="carousel">
    <img src="slide1.png" alt="" class="slide" />
    <img src="slide2.png" alt="" class="slide" />
    <img src="slide3.png" alt="" class="slide" />
    <img src="slide4.png" alt="" class="slide" />
    <img src="slide5.png" alt="" class="slide" />
    <img src="slide6.png" alt="" class="slide" />
    <img src="slide7.png" alt="" class="slide" />
</div>

This is all the HTML code that we need right now, so let’s make this carousel spin.

The Starting Script

The script that you need to get it running is extremely minimal, but can be configured to work exactly how you want it to with some additional code (which seems to be a common trait amongst jQuery plugins). There’s some basic CSS that you’ll want to use too in order for it to work, but that’s explained on the plugin’s page and I prefer not to go into too much detail on the CSS when this is a JavaScript tutorial.

1
$('#carousel').roundabout({childSelector:"img"});

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:

1
2
3
4
5
6
7
$('#carousel').roundabout({
    childSelector:"img",
    minOpacity:1,
    autoplay:true,
    autoplayDuration:5000,
    autoplayPauseOnHover:true
});

If you don’t understand what an option does, you can look it up on the Roundabout Project page.

Adding in the Description Text

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.

1
2
3
4
5
6
7
8
9
<ul id="carousel-descriptions">
    <li class="desc current">Slide 1 Description Goes Here</li>
    <li class="desc">Slide 2 Description Goes Here</li>
    <li class="desc">Slide 3 Description Goes Here</li>
    <li class="desc">Slide 4 Description Goes Here</li>
    <li class="desc">Slide 5 Description Goes Here</li>
    <li class="desc">Slide 6 Description Goes Here</li>
    <li class="desc">Slide 7 Description Goes Here</li>
</ul>

Now the slightly tricky part is using a bit of JavaScript to change which descriptions shows after the slide changes. That’s what we’ll look at next:

1
2
3
4
5
6
$('#carousel').on('focus', 'img', function() {
    var slideNum = $carousel.roundabout("getChildInFocus");

    $descriptions.removeClass('current');
    $($descriptions.get(slideNum)).addClass('current');
});

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.

Additional Controls

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.

1
2
3
4
5
6
7
8
9
<div id="carousel-controls">
    <span class="control current">Show Me<br>Slide 1</span>
    <span class="control">Show Me<br>Slide 2</span>
    <span class="control">Show Me<br>Slide 3</span>
    <span class="control">Show Me<br>Slide 4</span>
    <span class="control">Show Me<br>Slide 5</span>
    <span class="control">Show Me<br>Slide 6</span>
    <span class="control">Show Me<br>Slide 7</span>
</div>

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:

1
2
3
4
5
6
7
.on('focus', 'img', function() {
    var slideNum = $carousel.roundabout("getChildInFocus");

    $descriptions.add($controls).removeClass('current');
    $($descriptions.get(slideNum)).addClass('current');
    $($controls.get(slideNum)).addClass('current');
});

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$controls.on('click dblclick', function() {
    var slideNum = -1,
        i = 0, len = $controls.length;

    for (; i<len; i++) {
        if (this === $controls.get(i)) {
            slideNum = i;
            break;
        }
    }

    if (slideNum >= 0) {
        $controls.removeClass('current');
        $(this).addClass('current');
        $carousel.roundabout('animateToChild', slideNum);
    }
});

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.

Putting it All Together

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!

Author: Joe Zimmerman

Author: Joe Zimmerman Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.