jCarousel not working

Question

I have been banging my head for hours on this. I have jCarousel set up almost identically to their "simple" example, and I'm not getting any scrolling. If you set the width of the container higher, you can see that all the images are stacked on top of each other vertically rather than horizontally, but the UL is taking the proper "horizontal" class.

Help!

http://vermontgrapeandwinecouncil.com/eden-ice-cider-company/

Answer 1

The ul containing everything is set far too narrow. Expand it, or try removing the width altogether.

Answer 2

You have a ul with id "carousel" that has an inline style with width: 110px.
Try taking that width declaration out or making it larger.

Answer 3

That's the problem, though. I'm not setting the width to 110px. jCarousel is. You'll notice that style is contained in element.style, not the stylesheet. Why does it do that?

Answer 4

Are you sure your jcarousel declaration is getting called?

I see you are declaring using this:

(function($) {
 $(function() {
 $('#carousel').jcarousel();
 $('#carousel').show();
 });
})(jQuery)

Try taking the inside function out to make it look like:

(function($) {
 $('#carousel').jcarousel();
 $('#carousel').show();
})(jQuery)

The reason I say this is because if I call $('#carousel').jcarousel() in firebug, it works correctly.

Answer 5

If I take the inside function out, it won't fire on document ready. I tried it and no luck. What's really weird is that it works once I turn on firebug. I have no idea what would cause that. Same thing if I use the Web Developer toolbar to examine the element, or edit the stylesheet. For some reason, as soon as those tools get applied, the thing works.

Answer 6

I have solved this issue. I had the UL set to display:none; and then a script setting it to show after the carousel loaded to prevent an awkward flash of unstyled content. Apparently, that was giving jCarousel some trouble calculating the widths of the items since the list was not displayed. Thanks, everyone.