Ryan Kinal
100 E. St. Clair St.
Warren, PA 16365
716.581.1000
ryan.kinal@gmail.com

Google ProfileTwitter: @IndigloMouth
FacebookLinkedIn

Skinning jCarousel

jCarousel is a popular jQuery plugin which provides an easy way to implement a user-controlled carousel element - basically a list of several things which transition from one thing to he next with various effects. It comes with a couple basic "skins" which are very well put together, and are attractive, even if they won't necessarily fit the site you're building. Inevitably, you're going to have to style it yourself.

I had my first experience with creating a jCarousel skin this past week, and it was a little confusing to begin with. Things weren't working quite as I expected, especially in relation to configuration options. It was with this in mind that I decided to share my findings here. This will be a look a the basic elements that need styling, and how they function in jCarousel. Please note that there is a basic jCarousel stylesheet - jquery.jcarousel.css - which serves as a base for all jCarousel skins (that I've seen, at the very least).

Without further ado, here are the basic elements available:

Again, these are just the basics, but in order to skin jCarousel, these are really all you need. Now a little more detail.

.jcarousel-container

The purpose of this element should be fairly obvious. It's the container that wraps all the other jCarousel elements. As such, it determines the total size of your carousel - the total space it will take up. This should have a width if it's a horizontal carousel, or a height if it's a vertical carousel. It may have both, but it's certainly not necessary. This should also be the element that determines positioning relative to the rest of your page (floats, margins, etc.), and has the necessary padding and borders that contain the entire carousel. Lastly, you may want to add a position declaration to it, for reasons I'll talk about with .jcarousel-next and .jcarousel-prev.

.jcarousel-clip

This is the single most confusing thing about jCarousel, but it really makes a lot of sense once you get it. Before I figured it out, my carousel looked like hell. The purpose of this element is to providea viewport which shows you the currently visible items, and hides those that are not yet visible. The base jcarousel CSS gives it overflow: hidden to achieve this, and your job is to set its width and height such that it shows the number of items you want shown. That's all. It seems obvious, but from my experience, it's only obvious after you figure it ou.

.jcarousel-prev and .jcarousel-next

Above, I list these with "and variants" added, and that's because there is a set of classes that begins with each of them. However, they are only applied to two elements, which represent the "next" and "prev" buttons. These are actually, by default, <div> elements, and the variants are based on the state of the carousel.

.jcarousel-prev and .jcarousel-next
The base states. Use these classes to apply default positionings and backgrounds. Positioning is a key point, because the order of the elements is .jcarousel-prev, .jcarousel-next, and then the actual contents of the carousel. So, for a horizontal carousel, you'll probably want to float these left and right. For a vertical carousel, use position: absolute and move them to where you want them to be (most likely at the top and bottom of the container) with top, left, and bottom. That last one is great for .jcarousel-next - and this is the reason why you probably want to apply position: relative (or something other than the default) to .jcarousel-container
.jcarousel-prev-disabled and .jcarousel-next-disabled
These are applied to the buttons in addition to the base classes when there are no prior items nd no further items, respectively. So, if you're at the beginning, you'll have .jcarousel-prev-disabled, and if you're at the end, you'll have .jcarousel-next-disabled. Apply a "disabled" background (a faded arrow or some such image) to these, and you're all set.
...:active
Each of the for previous classes can have this pseudo-class applied to it, which essentially translates to the "mousedown" style. When the user clicks on the element, there will momentarily be a time when the mouse button is down, and that's when this class comes into play. Apply a new background, change the positioning a little, and it provides the extra little "oomph" for a stylish application. Do note, however, that this doesn't work in IE7 or less.

And there it is. The basic technique for skinning jCarousel. It's not that tough, but it can be time consuming if you don't know what you're doing. And hey, now you do.

Name:
Are you human? (enter yes if so)
Comment: