Flex slider is an image rotator module presenting the advantage of adapting automatically the slides (pictures) size according to the browser window size. You can use the Comparison of Rotator / Slider modules to chose the module that best fits your needs.
Flex slider is not as easy to use as Dynamic display block: Flex slider doesn't provide for a block. Unlike Dynamic display block, Flex slider requires you add a field to the content types you want to add a slide show to, and requires you upload the pictures one by one. Nevertheless, Flex slider provide size adaptation for free, while, as for now (January 2013) one has to pay to get a Dynamic display block theme providing for this functionality. Neither Flex slider nor Dynamic display block provide server-side image adaptation. For this, you can use Views slideshow + Responsive images and styles, as explained there.
The official documentation of Flex slider is a bit cryptic. There are 3 ways to use Flex slider: alone by fields, with the module "Views" or with the module "Views slideshow". We describe here the 1st method.
Installation
Install Flex slider as any other module, enabling "Flex slider fields". Don't forget to click on "Save" at the bottom of the page. Accept the installation of the modules Flex slider depends on if asked to.
Configuration
In the list of modules, section "Flex slider", click on "Configure".
Then you get a list of "option sets", i.e. a list of configurations, containing only one element, called "Default". I suggest you don't modify this one, which will serve you as a reference to compare to your own option set(s). So click on "Add option set". You'll be asked to name your option set.
Then configure your options if you want. Usually, their names are understandable, so I won't explain them all here. There are 3 groups of options (their tabs appear on the left): "General slideshow and animation settings", "Navigation and control settings" and "Advanced".
In "Advanced", you may need a "pause" indicator, to enable your visitors to observe peacefully one of your pictures, or to stop the rotation, that may become irritating if they spend time on the page displaying it. You also may want to uncheck the "Pause on controls" button, so that the rotation wouldn't stop after the visitor has used a control (such as choosing a particular picture).
Then click on "Save your option set" on the bottom.
If you plan to use several slideshows with different configurations the create as many option sets, the same way.
Adding an image field to a content type
In the administration bar, go to Structure → Content type. You can modify an existing content type or create a new one. Flex slider will use a special image field to work, so you have to add this field in the concerned content type(s). Let's suppose we want to add a slide show on some basic pages. Then we click on "edit" on the right of "Basic page".
Then click on the tab "Manage fields".
Then in the rolling list "Select an existing field", choose "Image: field_image (Image)". Then click on the "Save" button.
Then the field settings page opens. It is divided into 2 parts: the biggest one (called "Basic page settings" in our case because our modified content type is "Basic page") applies to your new field when used inside this content type, while the second part (called "Image field settings" in our case because our new field is called "Image") applies to your new field anywhere. The options are understandable. In the field settings, it is compulsory to set the "Number of values" to a number at least equal to the number of pictures you want to rotate in your slide show.
Click on save and then on the "Manage display" tab. There, as format for your new field, choose "flexslider".
Then click on the gear on the right, and select the option set you want. Click on update.
You will probably want to hide the field label: in the column "Label", choose "Hidden".
You are also likely to want your slide show to appear above the content body rather than below. You can drag and drop your image field upwards or downwards among the other fields of your content type. (In our case, there are only 2 manageable fields: "body" and "Image" (the "Title" field has to be display at the top, and doesn't appear here).
Once you're happy with your fields order, don't forget to click on "Save".
If you want a slide show on several content types, repeat all this section "Adding an image field to a content type" for each content type. You can use the same image field or not.
Creating a piece of content
In the administration menu: Content, click on "Add content", click on the content type you've just modified by adding an image field to it. Then fill your piece of content (the title is compulsory, as usual), and click to "Browse" to choose a picture type from your local system.
Then click on "Upload" and repeat these 2 steps ("Browse" and "Upload") as many times as you want to insert pictures, within the limit you chose as "number of values" in the "image fields settings".
Once you've finished uploading pictures, as for any node, you can configure the node options at the bottom of the page, and don't forget to click on "Save".
That's it.
If you can see no picture, it might be because the directory drupal/sites/example/files/styles is not writeable by the web server application. ("drupal" stands for the directory you have installed Drupal in, and "example", for the sub-directory we've put your site files in.) In such a case, change the permissions. In Mageia, the web server application corresponds to user "apache"; in Ubuntu, it's called "www-data".
Comments
Help Please
Hi,
I can't seem to get the flexslider module to implement onto the images. I am still getting still images with no features even after following the exact steps you had. Please help. Thank you!
Lester.