[Drupal] How to create a Responsive slideshow using flexslider in Drupal 7

Flex Slider is a power full Drupal module which integrates with the flex-slider library which allows us to build responsive and resizable slideshows

Follow the below steps to create a responsive slideshow in your Drupal site.

Step 1 : Download and enable the modules FlexSlider, FlexSlider Fields, FlexSlider Views Style.

Step 2 : Download the Flex Slider library from http://flexslider.woothemes.com/ and place it inside sites/all/libraries folder. So the needed assets will be available at, sites/all/libraries/flexslider.

Ensure you have a valid path similar to this one for all files
Ex: sites/all/libraries/flexslider/jquery.flexslider-min.js.

Step 3 : Go to configuration -> media -> flexslider
In there you can create a new configuration for the flex slider you are about to create.
There are three tabs in the configuration named,

• General slideshow and animation settings

  In the general tab you can select slideshow speed, slide direction etc.

• Navigation and control Settings

  In here you can set the control and navigation options.

• Advanced Options

  In here you can set the pause on hover pause on control elements.

Save the configuration once you are done with all the settings.

Step 5 : Create a view block, select format 'flex slider'. In format settings select the flex slider settings we created previously in option set. Select the image field which you want to show in the slideshow. Save the view and assign the block in the desired region.

To know more on the responsive slider creation and Drupal theming, please Get in touch with us.