Views Slideshow

by Gisle Hannemyr

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:

Then enable the following modules:

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:

jQuery update.

Creating a style, content type, and content

Navigate to Configuration → Media → Image styles → Add style. After you click Add style you will be prompted to give the style a name. Name the new style Slideshow demo.

Choose Scale and crop from the Effects menu. Click Add. Set the size of the Slideshow demo. Make it small, for example 75x75 pixels. Click Add effect.

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 Mange display and specify the Slideshow demo as the image style for the Image field.

Define the elements that make up the Teaser. 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 Configuration → Development → Generate content. Generate 20 nodes of type Slides. Use default settings.

Setting up a simple slideshow

Navigate to Structure → Views → Add new view. Enter the settings below.

  1. Name it Demo Slider.
  2. Choose the to show Content of type Slides.
  3. Uncheck Create a page. Check Create a block.
  4. Make sure the block title is "Demo Slider".
  5. For display format, choose Slideshow of Teasers without links and without comments.
  6. For items per page, set it to 5 (for all, set it yo 0).
  7. Do not check Use a pager.

views_ss01.png.

Click Continue & edit. Then click on None under Block Settings and name the block "Demo Slider Block". Click Save.

We're now ready to publish the slideshow. Navigate to Structure → Blocks. 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 Content and change it to Fields.

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.

views_ss02.png.

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.

views_ss03.png.

Locate the Format area on the left-hand side of the Views GUI. Click Settings 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 Pager fields.

views_ss04.png.

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 Format → Slideshow | Settings → Cycle options check the View Action Advanced Options 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 View Transition Advanced Options 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 Pager → Paged, and change ut to display all items.

Remember to Save 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 Format → Settings → Cycle options, 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 View Transition Advanced Options 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 View Action Advanced Options checkbox to expand. To have multiple items on a slide, set Items per slide to more than 1.

Troubleshooting

Final word

[TBA]

Last update: 2015-04-30 for D7 [gh].