jCarousel missing item width

On a recent project the UX team put together a set of wireframes where the use of carousels featured heavily. Luckily when you choose a JavaScript library like jQuery you have quite a few carousel plug-ins to choose from. I’ve used various different ones in the past, but my favorite is called jCarousel. You only have to take a quick look at the jCarousel homepage to see that it will do pretty much anything you ask of it. So in theory it should be a case of copy / paste the code into your site and you’re away. Unfortunately Web Development doesn’t always work that way; a small oversight can leave you racking your brains for hours… arghh!

The design and layout layout had already been created in the usual fashion. All that was left to do was to layer on all the JavaScript goodies (the fun part!). While implementing jCarousel I ran into a curious console error message:

“jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…”

When I checked the carousel CSS, the item width had been set:

1
2
3
4
5
6
7

.product {
    float: left;
    display: inline;
    text-align: center;
    font-size: 0.75em;
    width: 75px;
    }

Strange. The width had been set, so the error message must be from something else. After a few minutes investigation it turned out that the carousel didn’t have a parent with a set width. When fired the carousel is wrapped with two divs; one wraps the carousel, the other wraps the carousel and the navigation. Neither of these divs have an explicit width set which is what was causing the problem. It was a very quick fix in the end:

1
2
3
4

.jcarousel-container {
    padding: 20px 0 0;
    width: 300px;/* Fixed! */
}

Upon a little more investigation it seems you can fix this issue in other ways too. Instead of using a class of “product” to set the item widths I tried using the following:

1
2
3
4
5

#carousel li {/* New selector also fixed it! */
    /*...*/
    font-size: 0.75em;
    width: 75px;
    }

Very strange! The CSS in both cases changes the same elements, it just ignored the width in the ‘product’ class.

So for anyone else encountering the same “No width/height set for items” issue here’s a quick check list for you to try:

1. Make sure you set a width on the items (duh!). Maybe try different CSS selectors if necessary.
2. Set a width on the “jcarousel-container” class or one of its parents.
3. If all else fails, adapt one of the skin examples bundled with jCarousel.

The last one is very annoying if you have your carousel already styled up, but it is guaranteed to work.