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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.