How to make slideshow with views in Drupal

If you would like a slideshow block on your page you can do it easily. You need just the Views Slideshow module. Let’s see how to do it.

First you need a new view. Create a new block view. Block title is Slideshow and Display format is unformatted list of fields. Now, what we would like to display? Let’s say an article image with the article’s title. We need the last five items and we would like to rotate it horizontal and we want a pager.  Okay, let’s see step by step.

First step: We have to download the views slideshow module from drupal.org. On the module page we have two new module, they are called Views Slideshow and Views Slideshow: Cycle. We need to enable both of them (The views slideshow: cycle module has a dependency the libraries module) Unfortunately that’s not enough, because we need the cycle plugin from http://jquery.malsup.com/cycle/.  Download and copy the jquery files into “sites/all/libraries/jquery.cycle”.

Second step:  go back to our Slideshow views. Set the pager to “Display a specified number of items” and the number of items will be 5.

 
After add new content type filter criteria and set it as you wish I set article. Now we have just article content type and just the last five content. Now comes the tricky part

Third step: Now we set the Format. So click the “Unformatted list”.

We can choose some style and one of them is the Slideshow. Choose it and click the apply button. Now we got an option page. Scroll down until the cycle option. At the first option we can set the effect. The cycle plugin has lots of effects if you would like try all of them. At this time we need the scrollHorz effect. If you check the “View Transition Advanced Options” you can set the Timer delay, speed, initial slide delay offset. The default setting is okay for me so I don’t check it. Under the action option we can choose mouse action like pause when the mouse on hover or pause when we click on the slideshow.

I would like the pause when the mouse on hover so I leave it likes that. If we scroll down we get the widgets. You can decide where the widgets will be. If you choose the top, the widget be rendered at the top of the sliders. The top widget is god for us. We need the pager so check it. It has some settings.

The first one is the weight of the pager. It determines in what order the pager appears. Next one is the pager type. This is the style of the pager. You can add more if you preferred. The last one is the pager fields. You can choose the fields that will appear in the pager. If you check the Title the pager will be the title field. If you leave it with default settings the pager will be “next” and “previous”. In order to display the pager we have to select the controls.

When you’ve done click the apply and we are ready. Save the view and enable the view for example on the main page and it will be like this

 
Hope you like it
Enjoy :)

Peter - Head of Drupal developement at Penceo Geneva