How to Create a Carousel with CSS and jQuery
Published Saturday 19th of March 2011
Almost every website I visit nowadays has one of those fancy carousel's in the top to display the most valuable content to visitors.
In this article I'll explain how you can create one yourself using jQuery, the jQuery.scrollTo-plug-in and CSS.
First, we'll start with the HTML.
The HTML
We're going to display a list of the 5 (or so) most important things on our website, so I'll obviously use a list element to mark the information up:
<div id="whats-hot">
<h2>What's Hot</h2>
<div id="whats-hot-wrapper">
<ul>
<li id="whats-hot-1">
<h3>First "hot" item</h3>
<p>With any content you like</p>
</li>
<li id="whats-hot-2">
<h3>Second "hot" item</h3>
<p>With any content you like</p>
</li>
<li id="whats-hot-3">
<h3>Third "hot" item</h3>
<p>With any content you like</p>
</li>
</ul>
</div>
<ul class="navigation">
<li><a href="#whats-hot-1">What's Hot 1</a></li>
<li><a href="#whats-hot-2">What's Hot 2</a></li>
<li><a href="#whats-hot-3">What's Hot 3</a></li>
</ul>
</div>
That's it. As usual I wrap the entire module in a div-element named after the module name (you may want to use the HTML5 section element instead). Unfortunately we need yet another div that wraps all the scrollable items (this div will be set to overflow: hidden; to hide the items not in view).
The list of items is obviously a list element (you could use ol instead if your list is numeric). Beneath the list of items to scroll I have a list of links pointing to each item. The user will be able to scroll to any item using these links.
The CSS
What we'll do now is float all the items to the left and as we don't want them to shrink-wrap we need to give them a width. We'll also give the UL containing the items a width of a ridiculous number so that all the items stay on one row and finally the wrapper needs to have overflow: hidden set as well as the same width as the items (unless a parent to the wrapper has that width set).
#whats-hot-wrapper {
width: 600px;
overflow: hidden;
}
#whats-hot-wrapper > ul {
margin: 0;
padding: 0;
list-style: none;
width: 100000px;
}
#whats-hot-wrapper > ul > li {
width: 600px;
float: left;
}
Now all the "hot" items will be displayed in a horizontal row where each item is 600px wide. You'll wanna change the 600px to fit your own site.
If you click the links now you'll notice how the browser scrolls the #whats-hot-wrapper element so that the item the link was pointing to shows up. This is great as people without JS basically get the same functionality.
The JavaScript (jQuery)
Lastly we'll add some JS that takes care of "hijaxing" those links (we're not using ajax obviously so perhaps hijax isn't the right term... but I digress).
WhatsHot = {
init: function () {
this.hijaxNavigation();
this.autoScroll();
},
hijaxNavigation: function () {
// Initially scroll to the start
$('#whats-hot-wrapper').scrollTo(0);
// And set the first link in the navigation to "active"
$('#whats-hot ul.navigation a:first').addClass('active');
// When you click a link
$('#whats-hot ul.navigation a').click(function () {
// Scroll to the element the link is pointing to
$('#whats-hot-wrapper').scrollTo($(this).attr('href'), {axis: 'x', duration: 300});
// Remove previously active link
$('#whats-hot ul.navigation a').removeClass('active');
// Set this link to active
$(this).addClass('active');
// Prevent normal behaviour of link
return false;
});
},
autoScroll: function () {
// Every 8 seconds
var interval = setInterval(function () {
// Find the next link (the one after the currently .active link)
var next = $('#intro-box ul.navigation a.active').parent().next().find('a');
// If there is no such link - go back to the first link in the list
if (!next.length) {
next = $('#intro-box ul.navigation a:first');
}
// "Click" that link (to trigger the code in "hijaxNavigation")
next.click();
}, 8000);
// If user manually clicks one of the links stop auto scrolling
$('#intro-box ul.navigation a').mouseup(function () {
clearInterval(interval);
});
}
};
WhatsHot.init();
And that's it. As you can see I add an "active"-class to the link that was clicked, this is so you can style it differently but I also use it in the WhatsHot.autoScroll-method to figure out which link to click next.
You'll most likely wanna style the navigation a little. Perhaps to make it look like those fancy iPhone-bullets that display which home page you're on, but this is at least the basic functionality.
Enjoys
- Tags
- Comments
- 1 comments
Bookmark this Article