Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Flex Slider adds the Flexslider 2 Javascript library and an admin interface to give you a flexible and responsive slideshow.
I am installing Flex Slider on a new site and found the scattered documentation almost useless so I started this page. The README is copied in below.
Uses
There are several ways you can feed the slider. You can use views or an image field or manually add images. The slider can be in content or a block. I need a fixed manual list in a block and added a child page where I will describe what worked for me. Please add your different uses as child pages.
Alpha?
Flex Slider is currently available as version 1.0 rc3 or 2.0 alpha1. Which should I use? I need the slider working today so I should use 1.0 rc3 but 1.0 rc3 is stuck back at May 18, 2012. Ok, I will risk the 2.0 alpha version.
Download
Download the Flex Slider module from https://drupal.org/project/flexslider. The module is an 8 MB download that expands out to 51 files using 9 MB on disk.
You also need the https://drupal.org/project/libraries module. The Libraries module is used by several add on modules and Libraries may be already installed. The Libraries module gives the Flex Slider access to the Javascript library you download next. Libraries is a tiny download.
Download the FlexSlider Javascript library from https://github.com/woothemes/FlexSlider. FlexSlider 2 is a 1.4 MB download expanding out to 66 files occupying 2 MB on disk with most of it demonstrations. The actual Javascript file loaded with your page is only 17 KB.
Flex Slider also requires Ctools. Download https://drupal.org/project/ctools. Ctools installs 478 files occupying 2 MB on disk. Lots of modules use parts of Ctools and you probably have it already installed.
Install
Install Ctools. Ctools contains nine modules and you need only one switched on, the Chaos tools module. There is no configuration required for the Chaos tools module.
Install Libraries and follow the Libraries documentation for adding a library in the libraries directory. There is no configuration required for the Libraries module.
Install the FlexSlider Javascript library.
Install Flex Slider then configure Flex Slider. The configuration is the hard part where you have to read everything and, for your use, you might need additional modules. The various uses should be added in child pages.
Modules in the Flex Slider package
- FlexSlider 7.x-2.0-alpha1 Integrate the FlexSlider 2 library with Drupal. Requires: Libraries, Chaos tools, Image , File, Field, Field SQL storage. Required by: FlexSlider Fields, FlexSlider Views Style, FlexSlider Example.
- FlexSlider Example 7.x-2.0-alpha1 Sample implementation of FlexSlider
Requires: Context (missing), Features (missing), FlexSlider (disabled), Libraries (enabled), Chaos tools (enabled), Image (enabled), File (enabled), Field (enabled), Field SQL storage (enabled), FlexSlider Fields (disabled), FlexSlider Views Style (disabled), Views (missing), Menu (enabled), Strongarm (missing) - FlexSlider Fields 7.x-2.0-alpha1 Adds a display mode in Fields for FlexSlider
Requires: FlexSlider (disabled), Libraries (enabled), Chaos tools (enabled), Image (enabled), File (enabled), Field (enabled), Field SQL storage (enabled)
Required by: FlexSlider Example (disabled) - FlexSlider Views Style 7.x-2.0-alpha1 Adds a Views style plugin for FlexSlider
Requires: Views (missing), FlexSlider (disabled), Libraries (enabled), Chaos tools (enabled), Image (enabled), File (enabled), Field (enabled), Field SQL storage (enabled)
Required by: FlexSlider Example.
Permissions
Flex Slider adds one permission, Administer the FlexSlider module.
Configuration
The Flex Slider configuration is under Administration » Configuration » Media at /admin/config/media/flexslider.
The Advanced tab lets you switch on a debug mode.
The List tab lets you add or import optionsets
. I started a child page for optionsets. Someone experienced will have to add meaningful detail.
Optionsets are sets of options for sliders. Each slider uses one optionset. An optionset can be shared by multiple similar sliders. Select the Add link to see the optionset page and what can be set. Read https://drupal.org/node/2039349 for a detailed description.
README.txt
About
=====
Integrates the FlexSlider library into Drupal.
Current Options
---------------
Allows you to use FlexSlider in a few different ways
- As a library to be used with any other theme or module by calling flexslider_add() (N.B. You may also use libraries_load('flexslider') however this is not recommended)
- Integrates with Fields (flexslider_fields)
- Adds a Views display mode (flexslider_views)
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
Installation
============
Dependencies
------------
- [Libraries API 2.x](http://drupal.org/project/libraries)
- [FlexSlider Library](https://github.com/woothemes/FlexSlider)
Tasks
-----
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
- Ex: sites/all/libraries
4. The following files are required (last file is required for javascript debugging)
- jquery.flexslider-min.js
- flexslider.css
- jquery.flexslider.js
5. Ensure you have a valid path similar to this one for all files
- Ex: sites/all/libraries/flexslider/jquery.flexslider-min.js
That's it!
Drush Make
----------
You can also use Drush Make to download the library automatically. Simply copy/paste the 'flexslider.make.example' to 'flexslider.make' or copy the contents of the make file into your own make file.
Usage
======
Option Sets
-----------
No matter how you want to use FlexSlider (with fields or views) you need to define "option sets" to tell FlexSlider how you want it to display. 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 or create features.
Go to admin/config/media/flexslider
From there you can edit the default option set and define new ones. These will be listed as options in the various forms where you setup FlexSlider to display. NOTE: under advanced options, you can set a namespace prefix for the optionset. This will allow you to build custom CSS for each optionset. Start by copying the flexslider_img.css from the assets subfolder to your theme. Build new custom CSS for each prefix in your optionsets.
Carousels
---------
Carousels can be created with Flexslider2 by setting an Item Width for images and a Margin Width in the optionset. Use the flexslider_thumbnail image style and set your item width to fit the desired number of images into the div space available. NOTE: the margin width setting should correspond IN PIXELS to the margin widths set by your img CSS in your theme. This will allow Flexslider to properly calculate the "total width" of the image+margins so that horizontal scrolling behaves properly.
Flexslider 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.
Debugging
---------
You can toggle the development version of the library in the administrative settings page. This will load the unminified version of the library. Uncheck this when moving to a production site to load the smaller minified version.
### Image Width/Height Attributes
If your images aren't resizing, ensure the width and height attributes are removed. The module will attempt to remove them automatically on any image matching the pattern
ul.slides > li > img
Export API
==========
You can export your FlexSlider option presets using CTools exportables. So either using the Bulk Export module or Features.
External Links
==============
- [Wiki Documentation for FlexSlider 2](https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties)
Comments
Dependencies
Looks like in order to use the flexslider_fields module, the flexslider_fields_collection and the fields_collection modules are also required. These dependencies are not listed/required when the flexslider_fields module is installed.
The flexslider_fields_collection module is listed as a "Related/Integration" module on the flexslider project page - https://www.drupal.org/project/flexslider
Then when you go to the flexslider_fields_collection module project page - https://www.drupal.org/project/flexslider_field_collection - the fields_collection module is listed as a dependency - https://drupal.org/project/field_collection
I have not tried these as the field_collection module seems to have a lot of open issues. Going to try the views integration instead.
UPDATE: May be something else going on with my install. Field display option is now available to me without adding these other modules. Not sure what's up.
Module Dependencies
What are you trying to accomplish?
To my knowledge you can use flexslider_fields without flexslider_fields_collection and the fields_collection modules... That being said, you would probably want to use them together, but that doesn't mean they depend on each other.
If you are using views for
If you are using views for flexslider(7.x-2.0-alpha3 while writing this) with node having multi-value image field then, it is important to untick the Display all values in the same row option under view's image field settings. Otherwise images get displayed one below other.
BTW: although coldfrontlabs's article is nice too but this page also could be mentioned in module's page for documentation.
No FlexSlider under Slideshow type
I followed all the steps correctly but when I'm going to choose slideshow type, there's no FlexSlider but only Cycle.
What went wrong or something that I missed.?
How to Make the flexslider Image A Hyperlink
The downside to this method is that each slide needs the same image twice. I'm not sure if the views will load both images because when you build the view your excluding the image field from the display.
But it works, and if your images are optimized it may not matter much.
1) Install the Flexslider module and the library
2) Add an image style for your slides @ admin/config/media/image-styles
3) Configure the flexslider @ admin/config/media/flexslider
4) Build a Content Type for your slides
4a) Add the image field (add an image location ie. images/flexslider)
4b) Keep the Body field
4c) In the Manage Display tab for the image click the cog wheel and choose your option set and image style
5) Add the slides @ node/add/your flexslider content type
5a) Add your image using the image field
NOTE: For the next step you can use the image that your image styles generated @ sites/default/files/styles/flexslider/public/images/flexsliders or use the original image but make sure that it's the same size as image style you set up in step 2.
5b) Add the same image in the body field (I use the ckeditor and imce)
5c) In the body field right click the image and on the ckeditor tool bar click the link icon and add the path to wherever you want the hyperlink to point to. (Alternatively, you could use the source view and wrap the image in an "a" tag by hand)
6) Build the view as a block to display the flexslider.
6a) Add the image field, Exclude the label and image field from display
6b) The Formatter use image, For the Image Style use the flexslider you set up in step 3
6c) Add the Body field and Exclude the Label
7) Add the flexslider views block to a region
The image is now clickable
I've exported my view if you need it.
$view = new view();
$view->name = 'flexslider_front';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Flexslider Front';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Flexslider Front';
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'none';
$handler->display->display_options['style_plugin'] = 'flexslider';
$handler->display->display_options['style_options']['optionset'] = 'full_width';
$handler->display->display_options['row_plugin'] = 'fields';
/* Header: Global: Text area */
$handler->display->display_options['header']['area']['id'] = 'area';
$handler->display->display_options['header']['area']['table'] = 'views';
$handler->display->display_options['header']['area']['field'] = 'area';
$handler->display->display_options['header']['area']['format'] = 'filtered_html';
/* Field: Field: Image */
$handler->display->display_options['fields']['field_image']['id'] = 'field_image';
$handler->display->display_options['fields']['field_image']['table'] = 'field_data_field_image';
$handler->display->display_options['fields']['field_image']['field'] = 'field_image';
$handler->display->display_options['fields']['field_image']['label'] = '';
$handler->display->display_options['fields']['field_image']['exclude'] = TRUE;
$handler->display->display_options['fields']['field_image']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_image']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_image']['settings'] = array(
'image_style' => 'flexslider_full',
'image_link' => '',
);
/* Field: Content: Body */
$handler->display->display_options['fields']['body']['id'] = 'body';
$handler->display->display_options['fields']['body']['table'] = 'field_data_body';
$handler->display->display_options['fields']['body']['field'] = 'body';
$handler->display->display_options['fields']['body']['label'] = '';
$handler->display->display_options['fields']['body']['element_label_colon'] = FALSE;
/* Sort criterion: Content: Title */
$handler->display->display_options['sorts']['title']['id'] = 'title';
$handler->display->display_options['sorts']['title']['table'] = 'node';
$handler->display->display_options['sorts']['title']['field'] = 'title';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
'flexslider_front' => 'flexslider_front',
);
/* Display: Block */
$handler = $view->new_display('block', 'Block', 'block');