Building Slideshows with Navigation Based on Views

Slideshow is a popular feature on the front page of many web sites. Drupal makes it quite easy to build one. Here are the steps to build a Views-based slideshow in Drupal 7.

The ingredients you need are Drupal 7 core, Views module, and Views slideshow module. If you are testing out fresh, Chaos tools module will be required for Views.

Create a new view

Start by creating a new view. I gave it a name 'slideshow'. Uncheck the default checkbox for 'Create a page', check 'Create a block', and proceed with the [Continue & edit] button.

Add fields that you want to show in the slideshow. I added image, title, author, comment count, and Global: View result counter (explanation coming for the last field).

Note that in Views 3, author name is not provided by default (only user id is). You need to add relationship 'Content: Author' in the 'Advanced' section, which is initially collapsed.

The filter criteria of my choice is shown as follows. I've also selected the format to be Slideshow.

Enable the block

After saving the new view, a new block 'View:slideshow' is available on the Block admin page (/admin/structure/block). Enable the block in one of the regions on your front page and it will look something like this.

There are image, title, and author followed by the comment count (2) and its position (3) in the slideshow; i.e. it is the third slide in the pool. This is the field 'Global: View result counter' when you created the view.

Style navigation buttons

Now let's style the navigation of the slideshow that allows users to jump and pause to any slide. First, hide the currently showing the view result counter by checking 'Exclude from display'.

In the Format section, click on settings (Choose Format as 'Slideshow' if you have not already done so in the previous step). Go to 'Bottom Widget' section and check 'Pager' and then check 'Global: View result counter'. This is the real reason that we have added the field for the result counter.

After saving the view, the block now looks like this. Note the last 4 numbers.

Reviewing the code for the counter numbers (using a developer tool such as Firebug) shows that the css class names are changing in real time when the slide changes. Using this information, we can insert this style in current theme's css file,

to achieve graphical interactive navigation. The elements were already equipped to be interactive by Views and Slideshow modules. With further styling the slideshow can look like this.

The navigation button style was achieved using css styles without images. The circle buttons will look square in a browser that does not support rounded border corners such as Internet Explorer. If you need a more consistent look, you can use images instead.

Chris Loos helped with the theming.