YUI Carousel Only Showing One Row When I Want Two!

I fought with this issue all afternoon. I was setting up my carousel like this:


var carousel = new YAHOO.widget.Carousel("container");
carousel.set("numVisible", [5,2]);


But no matter how hard I tried. I couldn’t get it to show me more than one row. Over and over I fiddled with widths and heights and borders and padding but no luck. Finally, I took the example from the YUI Library Example Page and copied and pasted the HTML line by line into my page. When I got finished, the example was broken too!  So, what to do?

I wandered down to my javascript and compared it to the example one. The example passed in the columns and rows during the creation of the Carousel object and I was setting the variable right after I created it. Aha. So, I changed my two lines of code to this:


carousel = new YAHOO.widget.Carousel("container", {
// specify number of columns and number of rows
numVisible: [6, 4]
});


And everything is now working. Time for a pint.