Using Flex Slider with Drupal 7

One of the greatest challenges in building responsive sites is dealing with images. Dave is the maintainer of a great module called Adaptive Image Styles which helps with static images. Flex Slider on the other hand is a fantastic library to create image slideshows which adjust to your device. This is a module I’ve been working on for some time now since I wanted to pack in as much as possible into the module. Giving site builders the tools they needed to use Flex Slider in any way they like. Here’s a rundown of how you can use Flex Slider.

What the heck are “option sets”?

Before we go too far, let’s just define an important concept in the Flex Slider module which are “option sets”. An option set defines all the settings for displaying the slider. Things like slide direction, speed, starting slide, etc… You can define as many option sets as you like and on top of that they’re all exportable! Which means you can carry configuration of your Flex Slider instances from one site to the next.

To configure or create a new option set, go to admin/config/media/flexslider and click on “Add new option set”. Fill in your settings and you’re good to go.

Each option set will be available as an option in the configuration forms for the various ways to use Flex Slider.

Flex Slider Fields

The first option is to use Flex Slider directly with any Image field. This is probably the easiest and fastest way to get started with Flex Slider on Drupal.

First, create or edit a content type and add an image field. Once you have that set, go to “Manage Display” for your content type. Next to your image field click on the gear icon. Set your format settings to “Flex Slider” and select your desired option set. Click save and go create a new piece of content. Upload a few images, click save and you should see your images displayed in a Flex Slider container.

Flex Slider Views

Flex Slider Views allows you to build views which display their results in Flex Slider. Similarly to how you can output fields as an “HTML List” or “Table”, you can now select “Flex Slider” as an option.

Create or edit a view and ensure it can load a content type which contain image fields. Set your display fields to include an image field. In the field settings, DO NOT SET THE FORMATTER TO FLEXSLIDER. This will attempt to put Flex Sliders inside other Flex Sliders and will just get messy. Ensure you don’t include any wrapper markup, labels or container markup for the field value itself. Save your field.

Next, go to “Format” in the main Views windows. Click and select “Flex Slider”, then select your option set. Save your view and you should see your results displayed in Flex Slider.

Flex Slider Views Slideshow

Probably the most involved of all the options, you can also use Flex Slider with Views Slideshow. I’d recommend using this method only if you want to use your existing Views Slideshow plugins (ex: controls) to display alongside Flex Slider. At the time of writing, the only options support are next/previous/pause/play. Full pager support and other extensions will be added later on.

Build your Views Slideshow display as you normally would. In the Slideshow settings, instead of using the default Slideshow Type “Cycle”, select “Flex Slider”. Next set your option set and if you like your caption field. Finally, you can enable any available Views Slideshow widgets and you’re done! I would note that the field configuration options listed above apply here as well. Flex Slider runs on very little markup so if you don’t need those wrapper divs, get rid of them.

Flex Slider Core

At the most basic level, you can create a theme or module to generate the markup you want for your images and use “flexslider_add()” to include the library and build out custom Flex Slider instances. This is more for developers and themer and not the majority of users. Most users will probably use one of the three previous options.

Well that’s it! Hopefully you enjoy the module and please if you run into any issues post them in the issue queue at http://drupal.org/project/flexslider

Thanks!