Views Carousel

This documentation page is for the Views Carousel module, which is a Views plugin for outputting content as a jQuery carousel.

5.x-1.x-dev (Drupal 5/Views 1 Version)

Specifics on how to use the 5.x-1.x-dev version of Views Carousel are forthcoming. If you would like to write some documentation, please add it as a comment and we'll roll it into this page.

6.x-1.x-dev (Drupal 6/Views 2 Version)

Creating a Views Carousel is simple. Here's the step-by-step process:

• Make sure you have Views Carousel and Views 2 installed and you're up and running on a Drupal 6 installation.
• Go to the Views interface and add a new View. (Views Carousel works with any type of view including users or taxonomy)
• Set up your View to show the content you want in your carousel using the Filters, etc, then add a new block or page type view.
• Setting "Row Style" to "field" gives the best result since displaying full nodes in the carousel may be unpredictable
• Click the "style" option and choose "Views Carousel". The following options will be available:
• Grouping Field Allows you to group content by field
• Skin This determines the style of your carousel. There are 2 stock skins available and a choice for making your own custom skin.
• Display Carousel Vertically (checkbox) This is untested as of now. Should orient the carousel in a vertical direction
• First item to start on This allows you to start on an item other than the first one in the sort. For example putting in "2" would make the second item in your View appear first in the carousel
• Number of items to display in carousel This is currently untested and may conflict with the number of items in your view. Please test and report in the issue queue.
• Speed of animation This is the speed of the scroll animation which may be 'fast', 'slow', or in milliseconds.
• Name of easing effect This allows you to designate a jQuery effect for the easing behavior. Documentation on the options is found here
• Autoscrolling If set to a number other than 0, it enables an 'autoscrolling' effect and sets the delay to the number entered in seconds. The autoscrolling means that the carousel will scroll on it's own without any user interaction
• Wrap Content This function allows your carousel to go back to the beginning when you reach the end, or to the end when you're at the beginning, or both, essentially allowing the arrow buttons to always move the carousel somewhere.

Theming The Carousel

To theme the carousel requires some CSS skills. Here's some notes on theming the carousel:

• The height and width of the carousel items are set in the skins CSS files. Override them in your stylesheet to set other height and width. We're investigating whether auto-height and auto-width can be implemented naively.
• The buttons (prev/next) are also implemented via CSS. Create your own button graphics and override the theme CSS to show your buttons instead.
• The curved corners on both stock themes are available in Firefox or other Mozilla browsers by using CSS -moz-border-radius. So don't waste your time looking for rounded corner images...there are none in the stock themes.

Please Contribute!

We'd love to see you contribute to this documentation. Please leave your corrections, additions, or subtractions in the comments and we'll add them to this docuemntation.