Skip to content

jcarousel No width / height set for items

If you use jquery, then the chances are you are using the jcarousel library.

Well im new to jquery but have come along at an accelerated rate, perhaps because of my OO background.

Ok so you hit this page likely because you got this error

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

When i tried to nail down what the cause was i stumbled across a post that told me to add css styles for width and height. This was all well and good until i wanted to apply styling to more than one carousel on the page. Anyway what took me a few hours to figure out I support open and collaborative minds by sharing it here.

The error occurs regardless of widthand height attribute of you jarousel item. You need to set the width and height of the first parent of the carousel. If you follow this design pattern below, you cant go wrong

Firstly im assuming you have already included a reference to your already downloaded jcarousel library. There is really only one of them so you cant go wrong in finding it. here

1. Markup for your page containing the jcarousel element (note wrapped in a containing div)

Your initialising jscript to bring your carousel to life (note applied to the ordered list)

Your CSS (note applied to the wrapping div)

The reason why we do this is because the jcarousel class ammends the html markup so that styles will no longer apply because the objects will no longer exist, or have the same name at the jcarousel object level.

Hope this helped those who were stuck as I was.

Posted in Development, Uncategorized.

Tagged with .

3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Greg says

    Can you look over your example again, I’m not sure your classes/id’s and what you’ve explained match up.

    • Andre says

      Well spotted Greg, there was a name missmatch between the css and the markup. suffice to say there is no longer

  2. Swappnada says

    Thankyou Andre. I was struggling with this for quite a bit of a time until I spotted this link. Thankyou very much.

Some HTML is OK

or, reply to this post via trackback.