How to Create Slideshow on Drupal 7 using View Slideshow

Create slideshow on drupal maybe is not so easy as using Wordpress. But if you want to spend little time then you will love it. It is easy and you can customize the slideshow as you want. You can use view slideshow to create slideshow on your drupal site

Views is the best modules for Drupal that allow you to create database query from GUI on website without knowing database code. You just need to know what you want to show and follow instruction on the gui / view admin area. Another good thing from view is you can create slideshow using additional modules, View Slideshow.

By using View Slideshow, you can create slideshow based on image or content, on page, or block. You may also customize your slideshow design from css.

This tutorial will teach you how to to create slideshow in Drupal using View Slideshow. The drupal version that is used is drupal 7

Tools

Download these module and upload on your drupal site. Or you can install directcly from admin area Modules > Install New Modules. Of course you need to install them

You're also need to upload manually jquery.cycle, a single file that contains a JQuery slideshow script.

  • Download jquery.cycle.all.js
  • Access drupal installation from FTP or any access
  • Go to /sites/all/ folder
  • Create new folder /libraries/jquery.cycle/ so the path will be /sites/all/libraries//jquery.cycle/
  • Upload the jquery.cycle.all.js file into that last folder

Views

I assume you are familiar with views modules. You can create view for anything, block, page, both of them, to show image, content, etc. In this tutorial I like to show you how to create view slideshow with image and title in block.

  • Create views from admin area Structure > Views > Add New Views
  • Uncheck on Create a Page and check on Create a Block
  • Type block title
  • Choose Display Format as Slideshow This is an importent part. You can't set slideshow if you don't choose slideshow format
  • Fill Items per page more then 1 number
  • Check on Use a Pager if you want to show pager and do not check if you just want to show slideshow without paging
  • Click Continue and Edit button

You can manage setting as you want in the next page

  • On Fields click Add then choose Content: File attachments. Please note that you need to upload image on this field (File Attachments) > Apply (all display)
  • On next screen choose or click Rewrite Result. Check box on Rewrite the output of this field and submit this code
  • <img src="[upload]" border="0" width="250" align="center"/>
  • The code will make your file attachment appears in image, not in file name. You can edit the code by yourself
  • Arrange the field by clicking arrow near add and choose rearrange You can rearrange the field by drag and drop the field on the overlay pop up. After that click Apply (all dispaly)
  • You can add any filter of your views on Filter Criteria setting
  • To setup the slideshow go to Setting near Slideshow on Format title.
  • You can see the result at the bottom of the Auto preview area. Don't forget to check box Auto preview
  • After finish then click Save button

Display on Block

You are finish. Now the last thing is to display the block on your website.

  • Go to Structure > Block
  • Find your view block that will have title like "View: [your view name]
  • Put the block in any region as you want.

Congratulation, now you have slideshow on you drupal website. It is pretty easy, isn't. All you need is to learn and then you can customize the slideshow as you want. You can put image, content, title or another field on content type on slideshow. You can also customize the slideshow using css.