Views Slideshow
This chapter contains describes how to set up and use Views Slideshow. This is a project that can be used to create a slideshow on a website of content that can appear in a view.
Table of contents
Drupal projects discussed in this chapter: Views, Views Slideshow.
Introduction
As indicated by its name, the Views Slideshow project lets you set up a “slideshow” (i.e. a block or page with contents that automatically rotatates) displaying anything that can be listed in a view. It is not only for images. Anything that may appear in a view may be included in the slideshow. There are more specialized project (e.g. JuiceBox) that produces slideshow integration with Views, and many themes (e.g. Bootstrap) provide their own slideshow feature, so this project is not the only route to putting a slideshow on a website, but it is worth considering.
The first section explains how to set up a basic slideshow. The next section explains how to add a graphical pager to the slideshow. The third section explains how to display multiple items per slide.
Installing and enabling
To be able to work through the tutorial in this chapter, you need to install the following projects:
- Views
- Views Slideshow, Views Slideshow Cycle
- Chaos tool suite
- Libraries API
- Link
- jQuery Update
- Devel
Then enable the following modules:
- Views
- Views Slideshow
- Views Slideshow Cycle
- Chaos tools
- Libraries
- Link
- jQuery Update
- Devel generate
You also need to install the jquery.cycle.all.js library.
First download the file
from malsup.com/jquery/cycle:
Click on the "Download the Cycle Plugin"-link (upper left corner), and
the right-click on the "Cycle Plugin" link. The file you want is
named jquery.cycle.all.js. After downloading, create a
directory named
jquery.cycle
in your sites/all/libraries
folder, and move the JavaScript library
into it. When done, the path from the siteroot to the library shall be /sites/all/libraries/jquery.cycle/jquerycycle.all.js
.
The screenshot below shows the settings I use for jQuery update:
Creating a style, content type, and content
Navigate to
. After you click you will be prompted to give the style a name. Name the new style Slideshow demo.Choose
from the Effects menu. Click . Set the size of the Slideshow demo. Make it small, for example 75x75 pixels. Click .Create a content type called Slides. Untick "Promoted to front page". Set the default comment setting for new content to "Closed".
Add an Image field named SS image and a Link field named SS link to this type. Just use the default field settings.
Click
and specify the Slideshow demo as the image style for the Image field.Define the elements that make up the
. Set the Body trim length to 600, and make sure the SS image field is visible.We shall also create some dummy content, just for this tutorial. Navigate to
. Generate 20 nodes of type Slides. Use default settings.Setting up a simple slideshow
Navigate to
. Enter the settings below.- Name it Demo Slider.
- Choose the to show Content of type Slides.
- Uncheck Create a page. Check Create a block.
- Make sure the block title is "Demo Slider".
- For display format, choose Slideshow of Teasers without links and without comments.
- For items per page, set it to 5 (for all, set it yo 0).
- Do not check Use a pager.
Click
. Then click on under Block Settings and name the block "Demo Slider Block". Click .We're now ready to publish the slideshow. Navigate to
. The new block will now show in the list of disabled blocks, and you can add it to a region like any other block. Add it to the region of your choice. I added it to Highlighted.You can now visit the front page and see it in action.
Adding a pager
The slideshow created above is a very basic slideshow. Now we're going to add a pager.
Go back and edit the view for Demo Slider.
Under Format, click
Add the SS Image field to fields. Do not create a label. Set the image style to Large.
Add the SS Image field again. Use the same initial settings as the previous addition, but this time tick Exclude from display, and set the image style to Slideshow demo.The screenshot above shows the settings for the second of the two SS Image fields.
Remove the Title from Fields. Your fields area should look like the area shown below.
Locate the Format area on the left-hand side of the Views GUI. Click
next to Slideshow.Scroll down to the Bottom Widgets. Check the
box Pager under Bottom Widgets. Select Fields as the type of pager.
Select the second
of the two SS Image fields (the one excluded from display) under
Locate the Pager area in the middle of the Views GUI. Make sure the pager settings is set to Paged output, full pager, and also set the number of small pager items you want underneath your main image (e.g. 5).
By default, the pager items are stacked vertically. It does not look very nice. To change it, we need to add some CSS. Open up your theme's local CSS file in a text editor and add something code like this:
.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 5px 19px 0 0; }
Multiple items per slide
For some use cases, we want to show multiple items pers slide:
In the Views GUI navigate to
check the checkbox to expand. To have multiple items on a slide, set Items per slide to more than 1, for example 4.To control the transitions manually, rather than by timer check the
checkbox to expand. Set Timer delay to 0.
Scroll down to the top widgets and add controls. By default, only text controls are available, but projects like Views Slideshow Configurable Controls lets us add graphics controls.
In addition, in the Views GUI navigate to
, and change ut to display all items.Remember to
before exiting the Views GUI.By default, the slideshow items are stacked vertically. It does not look very nice. To change it, we need to add some CSS. Open up your theme's local CSS file in a text editor and add something code like this:
.views-slideshow-cycle-main-frame-row-item { float: left; padding-right: 13px; }
Manual controls
If we want to scroll manually, we can get rid of the pager.
Summary of cycle options
In the Views GUI, if you navigate to
, you get access to a number of settings for the slideshow. We've already used some of these, but for reference, here is a short list of the most useful ones.- Scroll effect
- The Effect pull-down menu let us set the transition effect. The setting
scrollHorz
is suitable for manual control and horizonatal scrolling. - Timing
- First click the checkbox to expand. This let us tune the timing. Setting Timer delay to 0 turn off automatic rotation of items.
- Items per slide
- First click the checkbox to expand. To have multiple items on a slide, set Items per slide to more than 1.
Troubleshooting
- "No main frame module is enabled for views slideshow."
Enable sub-module Views Slideshow: Cycle.
Final word
[TBA]
Last update: 2015-04-30 for D7 [gh].