In the past I’ve written about the Views module and its slideshow cousin. The major drawback of the combination of these 2 modules is the lack of direct support for a Responsive Slideshow.

Responsive Web Design (RWD) is about allowing your content to dynamically change to meet viewport constraints from the visiting device. The design of your site works across many devices with the goal of providing the optimal visual experience.

The Flexslider module allows you bundle the Flexslider javascript library into your site. This is a responsive slider for websites — it can adjust to configuration values you set to appear at the correct dimensions for a given viewport.

The Flexslider Views Slideshow module connects all these items together to create a responsive slideshow for Drupal.

In order to use Flexslider and the responsive slider you need to setup Breakpoints for your theme, and also install the Picture module (whew!). These allow you to define Image Styles tailored to each breakpoint of your site for your responsive slideshow. Then you configure the Views flexslider slideshow to use the appropriate Breakpoint Group.

A sample Breakpoints configuration (group) is seen here for my site:

Breakpoints configuration for responsive website.

The views flexslider slideshow image display settings can be seen here:

Picture display settings for the views slideshow using Flexslider.

By using these modules you get a slideshow which can scale visually to cater to your device’s viewport. An example of a small size and large size of a sample slideshow image are:

Small slideshow image.

Large slideshow image.

Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!