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". In the group of modules "Flex slider", enable "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". Click on the hyperlink "Configure" on the right.
Then you get a list of "option sets", i.e. a list of configurations, containing only one element, called "Default". List of option sets. 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.
Type your option set name.
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.Configuration of pause is in the "Advanced" tab. 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". Clicking on the hyperlink "edit" on the "Basic page" line.

Then click on the tab "Manage fields". Click the tab "Manage field" on the top of the page.
Then in the rolling list "Select an existing field", choose "Image: field_image (Image)". In the row "Add existing field", column "Machine name", use the "Select an existing file" list. 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 the rolling list "Number of values"
Click on save and then on the "Manage display" tab. There, as format for your new field, choose "flexslider".
In the row corresponding to your new field, column "Format", use the rolling list. Then click on the gear on the right, and select the option set you want. In the column "Format", use the rolling list "Option set". Click on update.

You will probably want to hide the field label: in the column "Label", choose "Hidden".
In the row of your image field, column "Label", use the rolling list.
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).
Drag the field using the cross on the left of its row. Once you're happy with your fields order, don't forget to click on "Save". Click on the "Save" button.
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. Click on the "Browse" button of the image field.
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".
Click on the "Upload" button of the image field.
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.
The picture rotator now works.
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

lesterng’s picture

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.