Multiple Jcarousel error "jCarousel: No width/height set for items..."

Question

Link: http://misiur.com/teatr

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

I had one carousel - no error. Then I added new - this error. Build same as first one. Simple HTML: ul with children li > a > img I don't have any idea why is it happening. I've tried to add dimensions with CSS, but still nothing. Do img's need to be same size?

Thanks in advance.

Answer 1

Even though this is an old question it still turns up in google search on this topic.

I posted a solution to this on my blog here http://drayblog.gotdns.com/index.php/2011/03/31/jcarousel-no-width-height-set-for-items/

but just in case one day it goes down, heres the post

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), this site doesnt support displaying much html so i have removed the opening and closing tags

div id="hlrt"
ol id="hmprt" runat="server" clientidmode="Static"
li class="l"
      !--your stuff in here--
    /li
/ol
/div

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

//initialise
$('#hmprt').jcarousel({
    vertical: true,
    easing: 'easeInOutQuad',
    scroll: 4,
    auto: 5,
    wrap: 'circular',
    animation: 3000
});
 

Your CSS (note applied to the wrapping div)

 
#hltr .jcarousel-item-vertical,
#hltr .jcarousel-item-placeholder-vertical {
    width: 330px;
    height: auto;
}
#hltr .jcarousel-container-vertical {
    width: 330px;
    height: 350px;
    border: 1px solid #fff;
}
#hltr .jcarousel-clip-vertical {
    width: 330px;
    height: 350px;
    z-index: 20;
}

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.