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

Is this still a problem?

marked #749562: jCarousel: No width/height set for items. as a duplicate.

@ericinwisconsin Can you provide some details on how to replicate this? I have not seen the error myself.

I'm getting the same error.
My setup:
- Drupal 6.19
- Views 6.x-2.11
- Views Carousel 6.x.1.0
- Ad 6.x-2.2
I was trying to present a block with 3 ads at a time, with a View of type "Node". By trial and error, i have found that this error only appears if i choose to display row style as "ad", instead of "fields".
I have tried every combination of options i could think of, including:
- using the default Drupal theme (instead of my fusion theme)
- forcing the height and width of each and every element inside the block tree, through css (with "!important")
- disabling any other animated blocks
Each time i got the same result: "row style: ad" = error, "row style: fields" = ok.
Finally, i got so fed up with this error that i decided to uninstall Views Caroussel and improvise with Views Slideshow: a block with 3 slideshow attachments wich synchronously slide up. It's not the same thing but it gets the job done and it has a nice effect.

PS: Are "jquery.jcarousel.pack.js" and "jquery.jcarousel.js" different versions of the same thing? I thought about debugging, but the module is using the "packed" version, wich is impossible to read.

This error is caused by css in skin.css

--edit--

I started getting it when I removed the margin from jcarousel-item-vertical.

Put some margin back in there and it works fine.

True. If you getting this error then check your skin.css file, put some margin in jcarousel-item-vertical or jcarousel-item-horizontal whatever style you are using. Even if you have designed new css file for your carousel then give some margin like 1px to it.

Problem will be solve by doing this !

hi ericinwisconsin,

This is not a problem of jcarousel's skinning. I always meet this problem and i realized a tip and i hope it will help to solve this problem for you.

For example with my usecase, i have 2 tabs and they contain 2 different carousels, when we choose tab#1, tab#2 will be disabled and vice versa. i used "display: none;" to hide the inactive tab

The problem is the jcarousel can not calculate width/height when it is contained in html tag which has "display: none;". The error happens

The solution is simple, the carousel instance must set to null value when we don't use it anymore.

inshort:
- contain carousel instances in global variables
- set null value to carousel when we don't use temporary
- reload carousel (i suggest to use reset() function for updating carousel again)

this is the pragment of my code, i hope it's useful for you:

// Load Carousel
pagebuilder.utils.loadSiteCarousel = function () {
jq("#siteCarousel").jcarousel({
scroll: 7,
size: 300,
start: 24,
initCallback: callbackfunction,
buttonNextHTML: null,
buttonPrevHTML: null
});
}

//init callback function - it will be called again when we call reset() function
callbackfunction = function (carousel, init) {
//update carousel instance
$theSiteCarousel = carousel;
.....
}

//destroy carousel and init it again
$theSiteCarousel = null;
$theSiteCarousel.reset();

subscribing

Re: comment #5

.jcarousel-skin-tango .jcarousel-item-horizontal {
  margin: 0 4px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
  margin: 4px 0;
}

Tango theme has margin in there but it's still not working

Escalating to critical as this bug undermines the whole point of the module

One possible source of this error is documented in #1292602: Carousel does not include all options when displaying code-based default views.

I have seen this same error in Drupal 7 while working in the View UI. Changes to my custom CSS did not help, so I tried to change back to a default skin. Problem went away after choosing the default skin.

I suppose I could keep using the default skin as the base, and then override the default skin selectors in my CSS file? Seems like a bit of a hack, I'd rather use "none" as the skin and then use my own CSS.

Experienced this issue on Drupal 7 when not using one of the built-in themes.

The problem seems to be with the jCarousel theming. Works just fine on the built in themes but if you make a custom theme and either don't set the width/height of .jcarousel-item OR set the margin at 0 it will break.

Make sure you have a width and height set as well as at least a 1px margin on one side of the carousel.

.jcarousel-item {
	width: 150px;
	margin: 0 1px;
	height: 144px;
}

Hello,

I've had a similar issue with two blocks each one with a jcaroussel.
One was hidden on desktop and the other on mobile.
The same error appeared and I managed to fix it adding a "margin: 1px" to the hidden slider elements.
Hope it can help you too.

I am closing this bug report since it has been created for a project version that is now unsupported.
If the bug can be reproduced in a project version compatible with a supported Drupal release, please re-open this issue.

I apologize for bumping this issue.