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:
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!