Using the Views Slideshow Module in Drupal 7
|March 9, 2012 | Written by Ed Andrea|
Slideshows are one of the most popular things that people want on their website and the Views Slideshow Module is the most popular way to create slideshows in Drupal.
So, it’s no surprise that Views Slideshow is one of the most popular Drupal modules.
Creating a Views Slideshow isn’t too difficult, but there are a quite a few steps to go through. If you’re a beginner, this will be a complete installation guide.
In this tutoirial we’re going to build a slideshow that will show rotatings testimonials in a block on our site.
Step 1. Install the necessary modules and files
To start, you’re going to need the following 5 or 6 modules to use Views Slideshow. Install and enable all of them.
You’ll also need to install jQuery which will make the slideshow work.
Step 2. Create an image style for the thumbnails
Set the size of the testimonial_thumbnail. Make it small, 75×75 should work. Click Add effect.
Step 3. Create a new content type
Go to Structure > Content types > Add new content type.
Create a content type called Testimonials. Click Save and Add Fields when you are finished.
Step 4. Add an image field
Step 5. Add a link field
You can repeat these last two steps step for as many fields as you want to add to the Testimonial Content Type. I’m going to add one more called Signed. It will be a text field where I can put the name of the person who left the testimonials.
Step 6. Manage the display of the fields
Click Manage Display to edit the way the fields are displayed.
We’re going to specify the image style to be used with this content type.
Step 7. Define the elements that make up the teaser
Now you have finished creating the fields and display for the Testimonials content type. Now we need to go and work with Views to complete the slideshow.
Step 8. Add the View
Step 9. Edit the View
Scroll through the options and make changes. From here you can add classes, choose the transition type for the slides and and Internet Explorer tweaks. Take some time to look at all your choices. This is where you will control the look and performance of the slides. Be sure to save any changes you make.
Step 10. Publish the block
Step 11. Add some testimonials
Now let’s create some content and try it out. Get some sample images to use for the thumbnails and create some testimonials.
TIP: if you want to quickly create sample items with Lorum Ipsum text, you can use a module called Drupal Ipsum, which allows you to just check a box to fill the article with dummy text when you create it. That’s what I used here.
Go to Content > Add content.
Choose Testimonials and create several so you can get a good idea of how the scroller and the block appear.
Step 12. Go to your homepage and look at the result
Your block should now show on your site.
Step 13. Edit the slideshow
Now that we can see the block in action, we may want to make changes. Here’s how to make them:
Step 14: Edit the slideshow settings
There are a wide variety of possibilities and options available to you with Views Slideshow. You might now want to go back and change anything from the image styles, to the fields, to the content, to the slideshow settings.
This tutorial hasn’t taken you in depth with any of those, but hopefully you now feel confident enough to start to build your own slideshows. You now know where to edit the image styles, fields, content and slideshow settings.
From here, it’s a question of practice and we’re sure you’ll build some great slideshows.