Tech Tips on Computers, Internet, Blogging, Web Development, Social Media, Android and more

Full width home advertisement

Post Page Advertisement [Top]

How to create sliders in Drupal 7 using Views Slideshow

Sliders or Slideshows are dynamic elements usually displayed in home page of websites. Usually with a catchy background image and phrases, they grab attention. They are great additions to any websites to add more aesthetics to websites. Since they are dynamic, websites look more grand and alive. They can also be used to display important content and graphics to engage with visitors. And though sliders are not so good in terms of making websites easily accessible on mobiles over data network due to higher load times, it has still become a standard web design layout.

In this post we shall discuss how to create testimonial sliders in Drupal 7 using Views Slideshow. Though the usual sliders we see are catchy background images with catchy phrases, sliders are not only meant for images. They can be any thing, almost. We can also display text such as testimonials, images, quotes etc.

How to create sliders in Drupal 7 using Views Slideshow?

Step 1: Things we need
drupal 7 slideshow jquery plugin
JQuery Cycle Plugin Download Page
  • In the next page, click the "Cycle Plugin" to download the file "jquery.cycle.all.js". Save it to your computer.
  • Steps to install the JQuery plugin on the Drupal site
    • Access the Drupal site installation on the local PC or on your host 
    • Browse to the /sites/all/ folder.
    • Create a folder called /libraries/ . The path will then be /sites/all/libraries/
    • Create a folder called /jquery.cycle/ . The path will then be /sites/all/libraries/jquery.cycle/
    • Upload or if on the local machine, copy the jquery.cycle.all.js file into that last folder, that is, /jquery.cycle/ folder
On a Drupal website running on XAMPP on Windows Machine, the path looks like this:
jquery cycle plugin on xampp windows system

This brings us to the end of required modules and plugin installation.

Step 2:  Create image styles for the thumbnails
  • Create one from "Drupal > Configuration > Media > Image Styles > Add Style"
Step 3: Create a new content type (For this example, I created a new content type called "testimonials".).
  • Add required fields and image field. 
  • Setup their display as desired
  • Setup teaser and default displays
Step 4: Create a new view block
  • To create sliders using Views Slideshow, the most important task here is to format the display of the Views Block. 
  • While creating the Views Block, find the display format and choose "Slideshow"
drupal slider view display format slideshow

  • Click "Settings" and configure settings for the slideshow.
  •  
    drupal slider view slideshow settings
Step 5: Display the new slideshow block
After creating the views slideshow, display the views slideshow block in a prefered region from Block administration page.


For the above steps in detail, kindly check out the tutorial below I have compiled.
Check out the Drupal Modules, and steps for creating testimonials slider on Drupal 7 using Drupal Views Slideshow module.


If this post was helpful to your or you have any queries particular to this post, kindly let me know in the comments. Cheers!

No comments:

Post a Comment

Bottom Ad [Post Page]