Adding a pager to Views Slideshow displays

Submitted by Marc on Thu, 06/21/2012 - 11:53am

Many of you are probably already familiar with using the amazing Views Slideshow display plugin for Views. Out of the box it comes with different types of controls for the navigation. But, perhaps what you really want is to be able to add some other form of navigation, like those "dots" that you see in many slideshows. Here's how you do it:

  1. You will need to access the jquery custom cycle options. Follow the instructions in the views slideshow settings window to install the json2.js file.
  2. Next, add a field to the view Header to use as a container for the navigation elements. I created <div id="slideshow-nav"></div>. I believe that you must use an id, but have not verified this. (Make sure that you have selected the Full HTML text format or the div won't even render on the page.)
  3. Now you can create the pager element using the jquery cycle custom options. Scroll down in the settings window for views slideshow and select "pager" from the Advanced options dropdown and give it the value of the id you have assigned to your container, including the leading hash (#) mark.
  4. The last thing you will need to do is to style your newly added navigation element with CSS. Probably one of the first things you will need to do is to set the z-index large enough to even see the container (that is assuming that you are going to position the pager "inside" the slideshow area).

This tutorial was added on the suggestion of sanguis.