Drupal Flex Slider gallery with thumbnails

Updated: 11 June, 2018 seen 25,056

Recently I faced a problem - how to nicely display image galleries on Drupal powered site. There are some modules you can use building your gallery view, for example I use to used views slideshow gallery module, but some time ago I discovered some Drupal powered sites using Flex slider library. 

I was pretty happy, and tried to make my gallery with thumbnails, but unfortunately I didn't work as I expected.

Recently I found a solution, how to configure you Flex Slider to work on Drupal.

Here are steps required:

  • Download Flex Slider module, extract to sites/all/modules
  • Enable Flex Slider, Flex Slider views display
  1.  Download the FlexSlider library from https://github.com/woothemes/FlexSlider/tree/version/2.2 
  2. Unzip the file and rename the folder to "flexslider" (pay attention to the case of the letters) 
  3. Put the folder in a libraries directory - Ex: sites/all/libraries 
  4. The following files are required (last file is required for javascript debugging) - jquery.flexslider-min.js - flexslider.css - jquery.flexslider.js 
  5. Ensure you have a valid path similar to this one for all files - Ex: sites/all/libraries/flexslider/jquery.flexslider-min.js
Now me must configure Flex Slider
Go to admin/config/media/flexslider
You will see - there is already Default type configured, it's up to you- you can override Default, or create a new style. I will create 2 new types, one for gallery slider, second for thumbnail slider:
Create a Gallery slider - Add -> Title Gallery, and leave all other settings intact (later you will have the option to change them)
Create a second slider for thumbnails - Add -> Title Thumbnails. Now on the first page (General Slideshow and animation Settings) enter details as in image below:
Under tab Navigation and Control settings enter values like in image bellow:
For now, you can save this type. Later we will come back to this part, but now lets move to the part involving views.
Views for Flex Slider
  • Create a new view Gallery (block) to display gallery slider
  • Format: Flexslider | Settings Option Set - Gallery
  • Fields: Images
  • Pager:
  • Use Pager: Display all items
Create another block on the same view, call it thumbnails
  • Format: Flexslider | Settings Option Set - Thumbnail
  • Fields: Images
  • Pager:
  • Use Pager: Display all items
N.B. Make sure under Fields: Images you have removed checkbox under MULTIPLE FIELD SETTINGS for Display all values in the same row
Save your view - go to blocks, and put both of the new blocks under content region (or whatever you prefer)
Now to make them work together go back to Flex Slider options, open Gallery type, and under Advanced Options tab find field Sync and enter #flexslider-2, this will make both views to work together (you can find your div by viewing page source). Save the changes.
Now edit thumbnail type. You can make some adjustments for how many items to display and other. Make sure you turn off pager under Navigation and Controls for thumbnail type.