Skip to: Site menu | Main content

Adding a pager to Views Slideshow displays

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.

Positioning Pager

Hi thank you for this tutorial.

I have followed it fully, but now I am confused on how to position the pager. I would like for the pager to be centered right under the slideshow (so outside the slideshow). Currently it is on the left margin. I have tried margin:0 auto; but it does nothing. I can position it absolute, but I figure this would throw off the centering once a slide is added or taken away. Does anyone know how I can center this?

Thanks!

text-align: center;

I am guessing that your issue is that the margin: 0 auto; is positioning the entire <div> centered. You want to place the pager text itself centered in that div. See if using text-align: center; accomplishes what you desire.

Thanks for getting back to me

Thanks for getting back to me so quickly.

I tried text-align: center; as you suggested, but it didn't do anything.

I have tried assigning the command to just "#slideshow-nav" as well as "#slideshow-nav a". Any other ideas?

Thanks for the help!

What's the width of the div?

I wonder if your <div> needs a width assigned to it? When I play around in Firebug at http://www.physicalactivitynetwork.ca/ the text-align: center seems to work fine when I set a width on the div.

wouldn't work

Hi,

I followed all of your steps but I can't see any pager appearing on my slideshow. I don't know what I'm missing. Could you post a bit more detailed instruction? Would be highly appreciated!

Thanks in advance,
Dave

Have you looked at the screenshots I posted?

Dave,
I've pretty much laid out everything exactly as it needs to be done. Did you notice that I had links to screenshots in some of the steps?

If you inspect the page source, what do you see in the div you have assigned for the navigation? Do you even see the div on the page?

Basically, you define the div in the View header. (Have you selected the Full HTML text format?) Then you let jQuery.cycle manipulate the DOM to place the anchor tags inside that div. You finish it all off by using CSS to style that div.

Check that you don't have some type of sytnax error -- maybe the way you are specifying the pager using the custom jQuery.cycle settings doesn't match what you have specified in the View header. (Did you notice that I included the '#' when I specified the pager option?)

You can see a couple of examples of this in action on http://www.aktana.com and http://www.physicalactivitynetwork.ca/.

If you can provide more specific feedback of what you've done and / or where you are confused by my instructions, I'll see if I can help you troubleshoot more.

Also, don't forget the ever-famous "have you cleared your cache?" I had somebody else tell me that something was weird with his session and once he signed out and signed back in, it worked.

Thanks for stopping by!

"have you cleared your cache?" :D BUT :(

Hi Mark,

Thanks for your reply. I think your last guess was right. I deleted everything, created again and it still didn't work, but shortly after it appeared... so probably it was caching. (although I haven't cleared cache yet)

BUT

Unfortunately there's something else wrong now. As I load the page with the slider everything looks right, but after 1 second or two the elements in the navigation div duplicate. So first I have link1 and link2 (as I have 2 items in the slide), but shortly I have link1, link2, link1, link2; although the javascript only uses the original link1 and link2 (class="ActiveSlide").

What do you reckon could cause this?

Thanks for your time on this, I really appreciate it!

Dave

Duplicate links

Dave,
I would not think that the jquery.cycle would add extra navigation links. My guess would be that you have an error in how you are building the slideshow display itself that is causing the images to be duplicated and jquery.cycle is just picking up those duplicate images.

Inspect the HTML to see if, in fact, you are creating duplicate images.

re: Duplicate links

Hi,

Thank you very much for trying to help me!
I thought the same, and checked it before I wrote back. There are no duplications, I checked in source code, and with the original pager as well. On the view there's only one field, the image, but the outcome looks like this:

1
2
1
2



I'd really appreciate any ideas on this!
Thanks,
Dave

Pager defined more than once?

Dave,
Maybe you have the pager defined more than once. It's hard for me to know for certain without having a look at your setup.

If you need more help than this, you may contact me for a bit of paid support. Otherwise, you may want to ask for some help on irc or in the forums.

Credits: XWeb | Chris Herberte | Andreas Viklund