Creating a Flexslider Carousel with Image Thumbnail Navigation

For a recent project, a client wanted us to create a carousel style display of product images which could be cycled through using a panel of thumbnails immediately underneath, or by back and forward buttons. There are numerous tutorials available online regarding how to create this sort of effect, but few specifically aimed at integrating with the Drupal 7 Views module. So we thought we’d make a few notes of our own on the subject.

To achieve our goal, we used FlexSlider 7.x-2.0-alpha3 and FlexSlider Views Style 7.x-2.0-alpha3. Our site was already running Views 7.x-3.8 and Drupal Core 7.33. The FlexSlider module is a very adaptable bit of software that allows Drupal and, with the right plugins, its modules, to leverage the FlexSlider library for creating dynamic and responsive slide shows. It is also highly configurable, making it ideal for our purposes, though at first the sheer range of options can seem a bit bewildering to the first time user. Here’s what we did with it:

1. Created a new flexslider from the module’s configuration UI.
2. Made sure that the image styles for the normal and thumbnail images were correct.
3. In the ‘navigation and controls’ tab, we set the ‘paging controls’ to thumbnails.
4. The tricky(ish) part. We had to create a new view which displayed the product image field using the FlexSlider format.
5. In the settings for the Flexslider format, we changed the Option Set to the new flexslider we just created.
6. Next, we configured our product image field so that the images were grouped per field.
7. After wondering why all of the images were showing at once, we realised that we had to go into the multiple fields settings and uncheck the ‘display all values in the same row’ box.

And that was it. Flexslider done, essentially. At this point, our images were displaying one at a time and we could cycle through them using either the thumbnails or the next and previous buttons. We tidied it up with a bit of css, including flexbox which we used to dynamically position the thumbnails, as there were different numbers of product images available for some products.

The only slight issue with this solution is that it seems to prevent the automatic slideshow animations of flexslider from working. In our case this isn’t a major problem but it might be mildly irritating at some point. If you know why that might be, by all means leave a comment below!