The FlexSlider library is a stand-alone JavaScript library for creating slideshows. There is, however, integration with the Views Slideshow module, which adds additional functionality not available when using FlexSlider alone. This video shows how to install FlexSlider and integrate it with Views Slideshow.

Flex Slider

Another useful module for slideshows is Flexslider. This module may be used on its own, but can also integrate with View Slideshow. The disadvantage of using Flexslider by itself is that it can only display images, unlike View Slideshow, which can display any content.

Install

  • Flex Slider
  • Flex Slider jQuery Library (Currently you need to use version 1.8 or higher, but lower than version 2.0. When the Flex Slider module reaches version 2, you should be able to start using version 2 of the library.)
    • Unzip the file inside the "sites/all/libraries" folder
    • Rename the directory to "flexslider"

Enable

  • Flex Slider
  • Flex Slider Views Slideshow

As you can see there are a few sub-modules. We'll take a look at each of these in turn, but since we already have a couple of slideshows configured with Views Slideshow, we'll start with that one.

Let's Edit the image slideshow first.

  • Edit the view
  • In the Format section, click "Settings" next to "Slideshow"
  • Slideshow Type: Flex Slider
  • Option Set: Default (We'll create a custom option set in just a minute)
  • Caption Field: Content: Title (This is optional)

Now, when we view the slideshow, you'll notice that the image pager doesn't work, and we have two sets of arrows to move between slides. Let's remove all of our View Slideshow widgets and let Flex Slider control everything.

  • Edit the view
  • In the Format section, click "Settings" next to "Slideshow"
  • When we scroll down, you'll notice that we can't uncheck some of the widgets. This is just a bug, and the way to get around it is to first switch the Slideshow Type back to Cycle
  • Disable all of the widgets
  • Slideshow Type: Flex Slider

Now, we've got a pretty nice looking slideshow using the Flex Slider pager at the bottom, and controls on the sides.