Create Drupal 7 Slide Show Using Views Slideshow Modules

  • Posted on: 12 November 2014
  • By: Zhijun Chen

I've been building Drupal websites during my spare time recently. One of the common features in modern sites is a home page slideshow.
There are a few ways to achieve this in Drupal. In this tutorial I will be using Views Slideshow module together with Views module.

  • Install modules and libraries

Download the following modules, install and enable the related modules via admin modules interface.

  1. Views
  2. jQuery Update
  3. Views slideshow
  4. Ctools
  5. Libraries API

Download jQuery Cycle plugin and install it by placing the js file inside jquery.cycle directory under sites/all/libraries.

  • Optional: Apply patch for customized navigation texts

By default the Views slideshow module does not offer customized navigation texts, only "previous" and "next" available for paging.
In my case I would like to use "<" and ">" as navigation buttons and style them afterwards simply because I prefer CSS3 to images. :)
In order to achieve this you need to apply the patch from this thread.
Once the patch is applied, add the following code to theme's template.php file (replace THEME with your theme name):

 function THEME_preprocess_views_slideshow_controls_text_previous(&$vars) {
  $vars['previous_text'] = '<';
}

/**
 * Implements template_preprocess_views_slideshow_controls_text_next().
 */
function THEME_preprocess_views_slideshow_controls_text_next(&$vars) {
  $vars['next_text'] = '>';
}

/**
 * Implements template_preprocess_views_slideshow_controls_text_next().
 */
function THEME_preprocess_views_slideshow_controls_text_pause(&$vars) {
  $vars['start_text'] = '';
}

 

  • Create content type

Next step we need to add a content type for slide pages. Add a content type by navigating to Structure -> Content types -> Add content types.
Here is an example content type I created:

  • Create contents

Once the content type is created, we can create some contents for slideshow by navigating to Content -> Add Content -> [Your content type]

  • Create slideview

After contents are created, we finally reach the last step: create the view.
Navigate to Structure -> Views -> Add new view. Select the display format to be Slideview as shown in the following:

Edit the view to include all the fields in the slideview, for example:

You can configure the Slideview by clicking on the settings link on the right, here you can choose the effect, and add pager:

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.