Flex Slider

Description

Flex Slider module integrates the Flex Slider library with Drupal and several contributed modules which allows you to build responsive, resizable slideshows. Meaning the slideshows automatically adapt to the size of the browser window or device.

Some features of FlexSlider slideshows include:

• Touch enabled nagivation
• Keyboard navigation
• Configurable slide animations
• Multiple sliders per page
• Lots more...

Current Options

Allows you to use Flex Slider in a few different ways

• As a library to be used with any other theme or module by calling drupal_add_library('flexslider', 'flexslider') or preferably with libraries_load('flexslider') or with flexslider_add()
• Integrates with Fields (flexslider_fields)
• Integrates with Views using a style plugin (flexslider_views)

Drupal 10 in 3.x

An initial port has been done to Drupal 10 and dropping support for Drupal 8. jQuery easing has also been dropped from support. The rest of the functionality should be the same as the 2.x version.

Drupal 9 is stable

The D9 version is a straight port of the D7 version and retains nearly all of the functionality.

What Changed?

• FlexSlider module API

  The API in D7 uses drupal_add_js() and drupal_add_css() to include assets. These functions are removed in D8. Now the flexslider_add() function returns an array containing the necessary FlexSlider assets, that can be used in '#attached' key of any render array.

• Option Set Configuration

  The D7 version used CTools to manage option sets. The D8 version uses the new Configuration Management Initiative (CMI). Most of the CTools functionality has been moved into CMI so not much has changed in the UI except export which is now done from admin >> config >> development >> configuration. Also, since an option set is necessary for the proper functioning of FlexSlider, the default option set cannot be deleted.

• Fields

  FlexSlider Fields only supports multi-value Image fields. The D7 version also supports media fields. In D8, the media module is now stable in core. Although it is not available in the initial release, it is under consideration. Follow #3086080: Add flexslider support for any (multi-valued) entity reference field and #2971337: Support drupal core media for more information.

• Examples

  The FlexSlider Examples module is now using Views instead of Context and Block. FlexSlider examples menu is in the toolbar. The examples work out-of-box and all of the module configuration is destroyed when the module is uninstalled.

What's New?

Responsive Formatter

The FlexSlider Fields module now has a responsive image formatter that extends the core Responsive Image module's formatter and adds FlexSlider settings. This formatter is only available when Responsive Image is enabled.

Future

More features are under consideration, including #3086080: Add flexslider support for any (multi-valued) entity reference field and #2844208: Responsive minItems and maxItems (multiple columns per slide)

Dependencies

• FlexSlider jQuery library version 2.5+

  Use version 2.6+ for alt attribute on thumbnails.

• Libraries API (OPTIONAL)

  With Drupal 8.9 comes a library service that allows for detecting where the FlexSlider library is installed. Thus making Library API unnecessary for this module. However, if you’re on Drupal 8.8 or less AND you have placed the library in a nonstandard location then Library API is necessary.

• Responsive Image (OPTIONAL)

  The core Responsive Image module is only required to use the responsive image formatter.

Installation

Please view the project's README for detailed installation instruction.

D8 Tutorials

• Daily Dose of Drupal Episode 220 - http://codekarate.com/daily-dose-of-drupal/drupal-8-flexslider-module

FlexSlider v2 (D7)

FlexSlider Video Tutorials

We'll be posting a series of videos on using FlexSlider to our YouTube playlist. If you have a suggestion for a video, post it to the #2068973: Video Tutorial Series Suggestions comment thread.

http://www.youtube.com/playlist?list=PLKdePeSydSBv9ro-oJoxnhAFInyDdU4o9

FlexSlider Examples

We've included a set of example configurations in the FlexSlider Examples module. You'll find configurations for:

• Using Fields and Views with FlexSlider
• Using carousels
• Using carousel sliders as navigation for other sliders
• Using captions

We'll be adding to the list of examples as well so be sure to check out the module for updates.

API changes looming for 2.x

#1926060: API changes to flexslider_add()

FlexSlider Views Slidshow now a separate module

http://drupal.org/project/flexslider_views_slideshow

We'll move all the issues for Views Slideshow to that module since the Views Slideshow integration is very specific compared to the Views and Fields integration.

Installation

• Libraries API 2.x

1. Download the FlexSlider library from https://github.com/woothemes/FlexSlider
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
4. • Ex: sites/all/libraries
5. The first two files are required and the last is optional (required for javascript debugging)
6. • jquery.flexslider-min.js
   • flexslider.css
   • jquery.flexslider.js
7. Ensure you have a valid path similar to this one for all files
8. • Ex: sites/all/libraries/flexslider/jquery.flexslider-min.js

That's it!

About FlexSlider

Library available at https://github.com/woothemes/FlexSlider

• Simple, semantic markup
• Supported in all major browsers
• Horizontal/vertical slide and fade animations
• Multiple slider support, Callback API, and more
• Hardware accelerated touch swipe support
• Custom navigation options
• Use any html elements in the slides
• Built for beginners and pros, alike
• Free to use under the MIT license

Maintainers

Sponsored by Chisholm Technologies Inc.

Original maintainers

Sponsored by Coldfront Labs Inc.

Co-Creator/Maintainer Mathew Winstone (minorOffense)

Original fields functionality provided by jepedo