Explore the world of carousel sliders with the Flex Slider Drupal module

The word “carousel” had long been associated with an amusement ride, but web design trends are bringing new word meanings. If you have a website, you can offer your guests to “take a ride” on a carousel, but it will be an exciting carousel of images, videos, banners, and so on. If beautifully built, this kind of carousel is sure to capture everyone’s interest and increase conversions.

Read more about image carousels and discover how to create a carousel in Drupal using the Flex Slider module.

What is a carousel in web design?

A carousel in web design is a group of content items (images, videos, ads, etc.) that website visitors can flip through or slide through using dot-based, arrow, thumbnail, and other types of navigation.

The term “carousel slider” is often used interchangeably with the term “carousel.” In fact, “slider” is an all-encompassing design term mostly used to refer to any sets of content items that can rotate in a sequence. However, a carousel has multiple elements within the same row as opposed to a slideshow that displays one full-size item at a time.

Carousels can auto-rotate, but modern design trends say you need to be careful with auto-rotation as it can impact usability and create annoyance. Instead, the best practice is to give the user full control.

Carousel ads are trending among digital marketers. According to Facebook’s data, campaigns featuring carousel ads have a 30-50% lower cost-per-conversion rate and 20-30% lower cost-per-click rate than standalone image ads.

Drupal modules for creating carousels & slideshows

Creating a carousel in Drupal is not a very difficult task. This is thanks to various contributed Drupal modules designed for carousel and slideshow creation via the admin dashboard. Most of them are based on third-party JavaScript libraries. Here are some of these modules:

the Slick Carousel
the Owl Carousel
the jCarousel
the jQuery carousel
the Flex Slider
the Views Slideshow
and more

How to create a carousel with the Drupal Flex Slider module

Getting acquainted with the Flex Slider module

Let’s take a closer look at one of the above mentioned Drupal carousel modules — the Drupal Flex Slider module. It allows you to build responsive carousels and slideshows, which means they will automatically adapt to the screens of various devices your audience might use.

The module integrates with the FlexSlider library with your Drupal website. It also integrates with Drupal Views, which means you can build any content collections via Views and make them into various carousels and slideshows. The module also works with the image fields, so you can turn an image field with some images into a Flex Slider. However, the module’s capabilities are not limited with Drupal image carousels — any content is suitable for FlexSlider.

The website of the WooThemes, the FlexSlider library’s creators, hosts a number of examples of carousels and slideshows to play with, including RTL (right-to-left) examples. Here are a couple of these:

• Basic carousel:
  
• Slideshow with thumbnail control navigation pattern:
  

Drupal FlexSlider installation notes

The Flex Slider Drupal module’s specifics vary a little bit throughout the Drupal versions, but here is what applies to the Drupal 8 Flex Slider module version.

It comes packed with the FlexSlider Example, the FlexSlider Fields, and the FlexSlider Views Style submodules. You can enable them to get the most out of the module when you want to create a carousel in Drupal 8.

The Drupal 8 Flex Slider version does not depend on any contributed modules, but it depends on a third-party library. The FlexSlider jQuery library will need to be separately installed into your Drupal website’s Libraries folder. Alternatively, if you use Composer for Drupal module installation, you do not need to worry about third-party libraries.

The FlexSlider example content type

If you have enabled the FlexSlider Example module from the pack, your Drupal website gets a new content type named “FlexSlider Example,” which is great for getting acquainted with the module. You can go to Structure > Content types and see that it has two fields out of the box: FlexSlider Example Image and FlexSlider Example Slideshow.

FlexSlider dummy content

The Flex Slider Drupal module will also provide you with dummy content that you can immediately use for exploring the carousel and slideshow creation options.

FlexSlider image styles

This is not the end of the ready-made components brought to you by the module — it also provides two image styles: FlexSlider Full and FlexSlider Thumbnail.

They apply a crop & scale effect on the uploaded images. You can control their dimensions by clicking “Edit” next to each of them. You do not necessarily have to use these specific image styles.

The FlexSlider patterns and their settings

By going to Configuration > Media > FlexSlider, you will find the list of various types of slideshows and carousels available. You can disable or delete the ones you do not need.

By clicking “Edit” next to the needed option, you will be able to configure its details:

• On the General Slideshow and Animation Settings tab, you can select the animation type (e.g. slide or fading), animation speed in milliseconds, slide direction (horizontal or vertical), and so on.
• On the Navigation Control and Settings tab, you can configure the paging control, keyboard navigation, touch navigation, and more.
• Finally, on the Advanced Options tab, you can set the pause on control, pause on hover, CSS usage, etc.

Creating a Views carousel

To create a Drupal Views carousel, go to Structure > Views, click “Add new View,” and give it a name (e.g. “Slider”). In the Views settings, select to show the content of the FlexSlider Example content type (or of another content type that you want). In the page or block display settings, be sure to select “FlexSlider” as the display format. This is the setting that wouldn’t be available without the module. You can make it FlexSlider of fields, but you have a wide choice of what to display instead of fields — full posts, teasers, and so on.

Save the result and you will be taken to your view detailed configuration page where you will need to add fields for your carousel elements. By default, they will only show a title. Click “Add” under “Fields” and add a “FlexSlider Example image” field (or another field that you want).

In the field settings, select the FlexSlider Full image style (or another image style you have prepared for this purpose).

Finally, under “Format,” you can click on FlexSlider > Settings in your Drupal view and select which carousel or slideshow pattern you want to use in this view. After that, just save all settings and then save your view.

When it comes to the patterns, we’ve been discussing this in the “The FlexSlider patterns and their settings” chapter and you can always come back to configuring their details in Configuration > Media > FlexSlider.

Get help with carousels on your website

The world of Drupal carousel sliders is extremely exciting but still it’s better to travel through it with a professional Drupal team. Let us make your carousels perfect in every detail. Drop us a line today!

Loving beautiful designs your Golems