Views Slideshow is the most popular module for creating slideshows in Drupal.
Earlier this year we showed you how to use Views Slideshow to create a basic slideshow.
One of our students read that tutorial and wondered about taking things further. They wanted to create a slideshow with smaller thumbnails, similar to the one you see on WhiteHouse.gov, Grammy.com and many other Drupal sites. In this tutorial, we show you how to create a more advanced slideshow, similar to those famous sites.
Step 1: Installation
You're also going to need a single file that contains a JQuery slideshow script. This will need to be uploaded manually.
Step 2: Views
We're going to create our slideshow using Views.
Once you're finished, your fields area should look like the area below.
Step 3: Design
First, let's set up the correct style for our images:
Now let's create the style for our smaller thumbnails.
Now, we'll apply those styles to our View.
Now click Save and let's go see your slideshow.
The final remaining problem is going to be the vertical images. We can fix that with CSS.
As a final step, you will need to tweak your image styles and your CSS to match your design.
Here's my end result, after this tutorial, and using dummy images:
All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means: