Drupal Technical

Drupal Tips: How to install and setup views Slideshow Module on drupal7

Nijo.lawrence | | 2 min read

There are many ways to setup a slideshow on your Drupal site. Here is a HOWTO to help you add a slideshow to your Drupal 7 website using the Views Slideshow module and some cool jquery plugins, and how to customize the controls, pager and effect type.

For installing and setting up views slide show, follow these steps.

  • Step 1: First download the required modules:
    1. Views
    2. Views Slideshow
    3. Chaos tools
    4. Libraries module.
  • Step 2: Then download jQuery plugins
    1. jquery.cycle.all.js plugin, available at: http://www.malsup.com/jquery/cycle/ and
    2. json2.js plugin available at: https://github.com/douglascrockford/JSON-js.
  • Step 3: Create a folder named libraries in sites/all/ folder. Inside that make a folder named jquery.cycle and paste jquery.cycle.all.js inside it. Make another folder named json2 inside the libraries folder and paste json2.js inside it.
  • Step 4: Install and enable all the downloaded modules.
  • Step 5: Go to content and add few contents with images on it.
  • Step 6: Then go to image styles and add a new image style for the slideshow.
  • Step 7: Then go to views and click on Add new view. Give the view a name and select block and give the block a name and select display format as Slideshow of Fields. Then click on Continue and edit.

    admin > structure > views > add

View Add

  • Step 8: In the next window click on the Title option and delete the title.
  • Step 9: Click on the Block name and type in a block name.
  • Step 10: Then in the display format check if Slideshow is selected.
  • Step 11: Clear all fields added in the fields option and select the image field that we want to display in the slideshow. On the next window select the image style we created to use in the slideshow.
  • Step 12: On the pager option click and select to display all items.

    admin > structure > views > view > view_name > edit

View Edit

  • Step 13: Click on the Slideshow settings option in the format area.
  • Step 14: Inside that select the slideshow type as Cycle. Then enable the checkbox View Transition Advanced Options which bring up some more option. Fill in the delay and speed according to your requirement. Then enable Sync option.
  • Step 15: Then we have other option to pause on hover etc. which can be enabled according to the requirement.

    admin > structure > views > view > view_name > edit > Slideshow settings

Slideshow settings

  • Step 16: Save your settings. Go to blocks and assign the newly created block to a region and you are done.
 

 

Related Topics