Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal Slideshows with FlexSlider from WooThemes

Parent Feed: 
drupal flexslider

Flexslider is a jQuery plugin by WooThemes and it makes it very easy to create slideshows.

You can integrate it into Drupal easily, using the FlexSlider module which has full Views integration.

The FlexSlider page on WooThemes.com, shown below, gives you an idea of the slideshows you can build with FlexSlider.

Drupal Slideshows with FlexSlider from WooThemes
  • Install the FlexSlider module, plus any module dependencies that you need.
  • I'm also going to recommend that you enable "FlexSlider Example" for this tutorial.

Next we need to download FlexSlider itself.

  • Extract the FlexSlider files to /sites/all/libraries/. Your files should be located here: sites/all/libraries/flexslider/jquery.flexslider-min.js
  • Go to Content > Create FlexSlider Example.
  • Upload an image and save the content.
  • Repeat by creating more content items and uploading more images.
  • Go to Structure > Block.
  • Publish the "View: FlexSlider Views Example: Thumbnail Controls" block.
  • Your slider will look like the image below:
  • Go to Structure > Views > FlexSlider Views Example.
  • Click "Settings" next to "FlexSlider".
  • Inside the settings, you'll see a variety of different options for your slideshow. These are similar to some of the examples on the WooThemes page.

The sample View also has automatically created Views, using some of these options:

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web