Home » Structure Guide » Working with Views » Views-Related Contributed Modules

Views Carousel

· ·
Last modified: August 25, 2009 - 08:12

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 natively.
  • 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.

» Login or register to post comments

Easing Effects Require JQuery plugin

flickerfly - December 13, 2008 - 06:28

It took me awhile to make heads or tails of especially the "easing effects" section. I think that this requires a plugin (for JQuery) that I don't have installed. Don't waste your time trying to see what this does cause it doesn't without the proper additions.

I'm looking forward to some kind soul taking the time to document skinning this a bit more. :-)

Login or register to post comments

Creating your own views carousel skin

ppmax - December 31, 2008 - 21:53

To make your own custom skin for this module requires two basic steps:
* Add the name of your skin to viewscarousel.module
* Create your own skin folder (with associated files)

To do this:
* go to sites/all/modules/viewscarousel/skins and copy the entire tango folder; rename your copied tango folder to "myskin" or whatever
* open up sites/all/modules/viewscarousel/viewscarousel.module and scroll down to the bottom of the file.
* create your own case to handle the params associated with your skin. In my case I just copied:

    case 'tango':
      drupal_add_css(drupal_get_path('module', 'viewscarousel') .'/skins/tango/skin.css');
      return 'jcarousel-skin-tango';
      break;

...and pasted this chunk below the break; in the tango case.
* next, rename case 'tango': to case 'myskin': (must match the name of your skin folder mentioned above)
* change the drupal_add_css path to point to your new css file; the path should be '/skins/myskin/skin.css'
* save viewscarousel.module
* now go to sites/all/modules/viewscarousel/skins/myskin and open skin.css
* do a search/replace for all instances of 'tango' and replace with 'myskin' or whatever you named your folder
* change the css properties as you see fit; save skin.css
* now go back to administer/views and configure viewscarousel to use your new skin. It should show up in the Skin: drop down list

Enjoy!

Login or register to post comments

Whoops--forgot 1 thing:

ppmax - January 2, 2009 - 05:22

In addition to the above, you need to add your custom theme name to the array of skins in the viewscarousel $form. To do so open:
sites/all/modules/viewscarousel/viewscarousel_style_plugin.inc and look for:
$form['skin'] = array(...
...
'#options' => array(...

Now add your skin to the array like this (make sure you use proper array syntax)
'myskin' => t('myskin')

Login or register to post comments

Bad form?

carlthuringer - June 25, 2009 - 23:45

Isn't it bad form to just hack into modules at random? What about reusability?

It seems it would be better to either patch this module to provide the functionality of adding more skins via an administration interface, or to write a new module that does same, altering menus as you describe.

If this module gets updated down the road, you have to port your code to the new version. How annoying and inefficient!

The module seems to allow 'custom' skin, but I haven't been able to get it to work. Typing a path to a css file on my mulltisite setup just isn't working.

I also can't override the css file by using selectors in my main theme file. Annoying.

Login or register to post comments

How to get cutsom css to work

mathmeye - October 21, 2009 - 14:10

ppmax actually kinda solved how to load a custom css without hacking the module.

  1. copy over the skin.css file form the 'tango' skin to the place of your choice
  2. rename file if desired, choose custom theme in the views options and point to your file
  3. open up your custom css file
  4. do a search/replace for all instances of 'tango' and replace with 'custom'
  5. change the css properties as you see fit; save skin.css

the key is to have the classes named .jcarousel-skin-custom instead of .jcarousel-skin-tango

hope that helps!

Login or register to post comments

Missing case??

X1-Bot - May 13, 2009 - 01:46

I don't see any section in the existing viewscarousel.module for tango's case? Did the code change since you made this post?

I get a parse error if I just add:

case 'tango':
drupal_add_css(drupal_get_path('module', 'viewscarousel') .'/skins/tango/skin.css');
return 'jcarousel-skin-tango';
break;

Login or register to post comments
 
 

Drupal is a registered trademark of Dries Buytaert.