Three Tweak-Thingees For View Carousel

I spent a good deal of time working with views carousel in Drupal 6 yesterday. There is a great screencast at Mustardseed Media to help you hit the ground running. Before starting, please remember that you need the jcarousel module if you want it to work at all.
Now... Three Tweak-Thingees you will need to get views carousel up and running nicely.

1. Those item-lists can give you fits… they don’t fit! When they are stuffed inside some other element they can get downright frustrating. It’s a game of hide-n-seek that you wish would be over soon. Luckily, FireBug is one of the best at doing the finding. I had all kinds of weird spacing and things were just out of whack until I realized it was the default styles that were the culprits. With this css I was able to override the defaults and make sure this were fitting they way I wanted.


.view-top-rotator .item-list ul li {
padding: 0px;
margin: 0px;
list-style-position: inside;
list-style-type: none;
}


2. The key to getting your elements to fit inside are these three elements. Don’t over think it, start with the size of the individual “thingee” you want displayed in your carousel. That is where you will set .jcarousel-item. Next where do you want the visible area. The .jcarousel-clip-horizontal is the entire area that will be visible in the carousel. Lastly, decide how big should the entire carousel be. For that you will set .jcarousel-container-horizontal.


.view-top-rotator .jcarousel-item {
width: 250px;
height: 167px;
}.
.view-top-rotator .jcarousel-clip-horizontal {
width: 500px;
height: 167px;
}
.view-top-rotator .jcarousel-container-horizontal {
width: 600px;
}


3. With all of the done I was ready to go… almost. When the carousel loaded, it was first displaying a list view of the elements… then snapping up into the carousel. I was not going to be happy with that so I needed to find a way around. I disabled JavaScript, and started FireBugging the DOM as it appeared before jcarousel got a hold of it. I found a class that was ONLY present BEFORE jcarousel loaded, and was gone AFTER the JavaScript for jcarousel fired. For my set-up it was ul.jcarousel-skin-tango. If you are using this skin, it will likely be the same for you, if not… start FireBugging :).


ul.jcarousel-skin-tango {
display: none;
}


[inline:carouselview.png]
My views carousel is working very well now, and with funny load issues. With these three tweak-thingees views carousel is good for most uses. I hope this blogthingee will help the next drupaler or themer through their workload just that much faster and more efficiently.