Building a slideshow with Views Slideshow 3 and jQuery Cycle

May 17
blog author

Appno Blogger

Appnovation Coop

The Views Slideshow module makes it easy to build a slideshow, once you know all the requirements to set it up. Views slideshow 3.x is only compatible with Views 3.x. It also depends on two other modules:Ctools (not needed for Drupal 7) and Libraries API.

The other key ingredient is the Jquery Cycle plugin, which needs to be downloaded to a libraries folder. Download the plugin from here (latest version) or here (older versions available).

The views slideshow project page recommends using version 2.88, and says you will need the jquery_update module in order to use the latest version. I didn't find any initial problems using version 2.999.5 without jquery_update. Whichever version you download, rename the js file to jquery.cycle.all.js (or jquery.cycle.all.min.js if you grabbed a minimized file). If there isn't one already, create a libraries directory in sites/all, and a directory called jquery.cycle in libraries.

Drop the js file in there so that you have: sites/all/libraries/jquery.cycle/jquery.cycle.all.js . Now you should see Slideshow, alongside Grid, HTML list, Table, etc..., as one of the style (Drupal 6) or format (Drupal 7) options in your views. There are flexible formatting options in the settings. The ones I most often customize are the pager and control widgets.

Configure Top Widgets or Bottom Widgets depending on where you want to place them. The Controls widget provides the "previous", "pause" and "next" links. These are just text but can be replaced by images with some css. The Pager widget is the one to use if you want to have either thumbnails or an icon to represent each of the slides in the slideshow. You can choose whether the slideshow jumps to the represented slide when you click on the thumbnail or icon.

To set up the thumbnails, you have to choose which field to display as the pager. I often want to show a generic image, like a dot, just to represent the number of slides in the show. That's where the result counter comes in handy. There is a field available to all views, in the Global group, called "Global: View result counter". It simply outputs the position of the view result. So if I add that field and choose it as the field to use for my pager widget, then I get a list of numbers below (or above) my slideshow.

Again, with a little css, the numbers can be replaced with a background image. There is also a Slide Counter, in case you want to display something like "Slide 5 of 24". That's it for the basics of creating a views slideshow.