• Girl Scout Samoa Cookie Cupcake

    Captions and cupcakes. Winning combination.

  • Pumpkin Caramel Cupcake

    This image is wrapped in a link!

  • Hot Cocoa Donut Cupcake
  • Vanilla Cookie Dough Cupcake

Why 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
Download FlexSlider (584kb)
  • Get Started

    initial setup
  • Advanced Options

    customize your slider
  • Support

    about FlexSlider
  • Community

    ask questions here!

Get started with FlexSlider in three easy steps!

Step 1 - Link files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

          <!-- Place somewhere in the <head> of your document -->
          <link rel="stylesheet" href="flexslider.css" type="text/css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
          <script src="jquery.flexslider.js"></script>
          

Step 2 - Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class="flexslider"> in this example. Then, create a <ul class="slides">. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

          <!-- Place somewhere in the <body> of your page -->
          <div class="flexslider">
            <ul class="slides">
              <li>
                <img src="slide1.jpg" />
              </li>
              <li>
                <img src="slide2.jpg" />
              </li>
              <li>
                <img src="slide3.jpg" />
              </li>
            </ul>
          </div>
          

Step 3 - Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

          <!-- Place in the <head>, after the three links -->
          <script type="text/javascript" charset="utf-8">
            $(window).load(function() {
              $('.flexslider').flexslider();
            });
          </script>
          

...and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 - Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.

          animation: "fade",              //String: Select your animation type, "fade" or "slide"
          slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
          slideshow: true,                //Boolean: Animate slider automatically
          slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
          animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
          directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
          controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
          keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
          mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
          prevText: "Previous",           //String: Set the text for the "previous" directionNav item
          nextText: "Next",               //String: Set the text for the "next" directionNav item
          pausePlay: false,               //Boolean: Create pause/play dynamic element
          pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
          playText: 'Play',               //String: Set the text for the "play" pausePlay item
          randomize: false,               //Boolean: Randomize slide order
          slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
          animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
          pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
          pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
          controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
          manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
          start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
          before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
          after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
          end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
          

Turn your FlexSlider up to 11

Building the slider on this site

To give you a demonstration on how to use the customizable properties of FlexSlider, we will take a detailed look at how the slider used on this site was configured. Let's get into it. Building multiple sliders and callback API information are located below the following example.

Setting custom properties

First, we need to add to properties to our flexslider() function. Set the animation property to "slide." This will give us the slide animation, but will also give our slider element overflow: hidden. To work around this, we can create a container to wrap our slider with, and then tell our FlexSlider to append the control elements to that container by using the controlsContainer property. In the markup below, I created a <div class="flex-container"> to encompass my slider element. Then, just set the controlsContainer property to ".flex-container". Notice that the css selector is included in this string.

          <script type="text/javascript" charset="utf-8">
            $(window).load(function() {
              $('.flexslider').flexslider({
        		    animation: "slide",
        		    controlsContainer: ".flex-container"
              });
            });
          </script>
          
          <div class="flex-container">
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="slide1.jpg" />
                </li>
                <li>
                  <img src="slide2.jpg" />
                </li>
                <li>
                  <img src="slide3.jpg" />
                </li>
              </ul>
            </div>
          </div>
          

Adding captions

Adding captions with FlexSlider is logical and easy! Simply add any desired html markup to the slide you want it to show up in and add appropriate styles with css. In our example, two slides were given captions by using the <p class="flex-caption"> element. The .flex-caption class is the default class to add styles to slide captions.

          <div class="flex-container">
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="slide1.jpg" />
                  <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
                </li>
                <li>
                  <img src="slide2.jpg" />
                  <p class="flex-caption">This image is wrapped in a link!</p>
                </li>
                <li>
                  <img src="slide3.jpg" />
                </li>
              </ul>
            </div>
          </div>
          

Bonus: Setting up multiple FlexSliders

Setting up multiple sliders with FlexSlider is extremely easy. Maybe too easy, even. Remember that you are using a responsive plugin and your goal is to help mobile users, not hurt them. :)

Below are two script examples and one markup example. The first script box demonstrates how you can select multiple sliders by using a class selector. All the sliders will receive the same properties in this declaration.

The second script example demonstrates initializing the sliders with unique properties. In that example, <div id="main-slider"> will have a slide animation and use a custom controlsContainer, where the <div id="secondary-slider"> will inherit all of the default properties. ...tada!

          <!-- Target both sliders with the same properties -->
          <script type="text/javascript" charset="utf-8">
            $(window).load(function() {
              $('.flexslider').flexslider();
            });
          </script>
          
          <!-- Target sliders individually with different properties -->
          <script type="text/javascript" charset="utf-8">
            $(window).load(function() {
              $('#main-slider').flexslider({
                animation: 'slide',
                controlsContainer: '.flex-container'
              });
              
              $('#secondary-slider').flexslider();
            });
          </script>
          
          <!-- Somewhere in the  of your page -->
          <div id="main-slider" class="flexslider">
            <ul class="slides">
              ...
            </ul>
          </div>
          <div id="secondary-slider" class="flexslider">
            <ul class="slides">
              ...
            </ul>
          </div>
          

The new, robust Callback API

The new callback API gives you full control over all of your sliders. The callback functions currently available are start(), which fires after the plugin is initialized, before(), which fires before/asynchronously with every slide animation, after(), which fires after every slide animation completes, and end(), which fires when you reach the last slide. Each callback function will accept one parameter, which will embody the slider element.

The following example demonstrates how you could track slider counter information, such as "3 of 12" using the callback functions. First, we use the start() callback to gather the total slides. We only need to do this once, so start() is a good place for this. Notice that start() accepts the slider element as a parameter and then calls the slider.count property. Count is just one of many properties tied to every slider instance that are available to you through the callback functions. The last step in this demonstration is using the after() callback to update the current slide information after each animation. You will notice another slider property used here to gather the current slide information, slider.currentSlide.

For your convenience, a comprehensive list of slider properties has been included below this code example. Seriously, get creative and do awesome sh*t.

          <script type="text/javascript" charset="utf-8">
            $(window).load(function() {
              $('.flexslider').flexslider({
                animation: "slide",
                controlsContainer: ".flex-container",
                start: function(slider) {
                  $('.total-slides').text(slider.count);
                },
                after: function(slider) {
                  $('.current-slide').text(slider.currentSlide);
                }
              });
            });
          </script>
          
          slider                        //Object: The slider element itself
          slider.container              //Object: The ul.slides within the slider
          slider.slides                 //Object: The slides of the slider
          slider.count                  //Int: The total number of slides in the slider
          slider.currentSlide           //Int: The slide currently being shown
          slider.animatingTo            //Int: Useful in .before(), the slide currently animating to
          slider.animating              //Boolean: is slider animating?
          slider.atEnd                  //Boolean: is the slider at either end?
          slider.manualPause            //Boolean: force slider to stay paused during pauseOnHover event
          slider.controlNav             //Object: The slider controlNav
          slider.directionNav           //Object: The slider directionNav
          slider.controlsContainer      //Object: The controlsContainer element of the slider
          slider.manualControls         //Object: The manualControls element of the slider
          slider.flexAnimate(target)    //Function: Move slider - (target, pause) parameters
          slider.pause()                //Function: Pause slider slideshow interval
          slider.resume()               //Function: Resume slider slideshow interval
          slider.canAdvance(target)     //Function: returns boolean if slider can advance - (target) parameter
          slider.getTarget(dir)         //Function: get target given a direction - "next" or "prev" parameter
          

All available FlexSlider properties

This was mentioned in the Get Started tab, but it is worth reiterating. Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values.

          animation: "fade",              //String: Select your animation type, "fade" or "slide"
          slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
          slideshow: true,                //Boolean: Animate slider automatically
          slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
          animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
          directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
          controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
          keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
          mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
          prevText: "Previous",           //String: Set the text for the "previous" directionNav item
          nextText: "Next",               //String: Set the text for the "next" directionNav item
          pausePlay: false,               //Boolean: Create pause/play dynamic element
          pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
          playText: 'Play',               //String: Set the text for the "play" pausePlay item
          randomize: false,               //Boolean: Randomize slide order
          slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
          animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
          pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
          pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
          controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
          manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
          start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
          before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
          after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
          end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
          

A little information about FlexSlider

About FlexSlider

FlexSlider was built to serve up the best responsive jQuery slider around. I had built a few implementations of responsive sliders on different client projects and noticed that there was a glaring hole for plugin support with the concept. I wanted to build a plugin that would serve the newest of beginners, while providing seasoned developers a tool they could use with confidence. What has come forth is this, FlexSlider. I plan to maintain this plugin and provide support to users implementing FlexSlider into their sites. Responsive web design can be tricky, but I hope that FlexSlider serves to uncomplicate the process, just a little bit.

Thanks to @wcsete for motivating me to tackle this plugin!

Cupcakes? Check.

The amazing cupcakes displayed in the images above were baked by my beautiful wife, and photographed by myself. Enjoying delightful baked goods is suggested while using FlexSlider.

Browser Support

FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported.

Future Goals

  • Support for multiple sliders (supported as of v1.6)
  • iOS swipe gestures (supported as of v1.2)
  • Callback API (supported as of v1.7)
  • CSS3 transitions (supported as of v1.8)
  • Addition of carousel options (visible slides, # of slides to move on animate, etc.)
  • Custom configuration support for smallest file sizes possible.
  • More theme options

Known issues

  • No known issues at this point. Feel free to call out any problems you find over in the Community section!

Changelog

  1. v1.8: October 22, 2011
    - CSS3 transform3d support for webkit browsers coupled with 1-to-1 swiping has been introduced. The entire touch swipe experience has been vastly improved beyond comparison to previous versions.
    - New resize event handling to nix the old behavior. Slides not stay in place, rather than moving around and then sliding back.
    - Added "slideDirection" property to support "vertical" or "horizontal" sliding directions
    - Added "mousewheel" property to support mousewheel scrolling of slide elements.
    - Added "slider.manualPause" that is set by the pausePlay element and can be set via the callback API. This will prevent pauseOnHover from resuming on hover exit.
    - Removed "touchswipe" property as a customizable options.
    - Fixed behavior in slides with only two slides. Scrolling should happen as intended.
    - Fixed pausePlay element bind to trigger both touchstart and click.
    - Note: A destroy function has been added to the main plugin file, but is commented out and omitted from the minified version. Those interested can find the function and documentation to implement a custom destroy function based on their own needs/event triggers.

  2. v1.7: September 10, 2011
    - Callback API features with start(), before(), after(), and end() options. All functions should include one parameter for the slider element. (ex. start: function(slider) {})
    - Crossfade has been introduced through new CSS techniques
    - pausePlay property added to support a dynamic pause/play element
    - animationLoop property added to support non-looping sliders
    - FlexSlider CSS further improved, including IE hacks to improve cross-browser design integrity

  3. v1.6: August 30, 2011
    - Vast improvements to the plugin architecture
    - Multiple instances of FlexSlider are now possible. (Please, consider your audience before going crazy with this)
    - Removed the "show" animation option in interest of other things. Use animationDuration: 0, if needed.
    - FlexSlider CSS has been updated. Use the v1.6 stylesheet!

  4. v1.5: August 27, 2011
    - Improved mobile support by adding "touchstart" to bound events
    - Implemented solution for no javascript fallback (relies on user, and prepares for html5 boilerplate/modernizr classes)

  5. v1.4: August 23, 2011
    - Added "manualControls" property to allow for custom, non-dynamic control navigation
    - Added "show" animation to allow for instant transitions between slides

  6. v1.3: August 18, 2011
    - Made slide animation a continuous scroll effect, rather than jumping back to start/end
    - Cleaned up code and created better test cases for different slider scenarios. The slider is a lot more bulletproof as of this update.

  7. v1.2: August 16, 2011
    - Fixed some code redundancies
    - Added "randomize" property to randomize slide oder on pageLoad
    - Added "touchSwipe" property for swipe gestures on iOS and Android devices (no Android device to test this, but it should work)
    - Fixed minor bugs in jQuery 1.3.2 where navigation was not appending correctly
    - Fixed major bug in jQuery 1.3.2 where slide animation was not sliding

  8. v1.0 - Initial release under the MIT license.

Contributors

Managing this project takes a significant chunk of my time outside of work, so I would like to give my sincerest thanks to those who have supported FlexSlider:

  • Andrew Fenenbock
  • Nicholas Frota
  • Datch Haven
  • Amber Weinberg
  • Daniel & Evelina Barry
  • Justin Myers - Zero Signal Productions
  • Ruth Elliot - EDU Designs
  • Tim Hyde - Hyde Internet
  • Shlomi Atar
  • Courtney Curtis
  • Simon Clayson
  • Martin Gartner
  • Mark - Hild/Nelson Design
  • Jeroen Wiersma

Join the FlexSlider community

Bring your questions/feedback here!

Have questions about your FlexSlider implementation? Feel like dropping some praise for the plugin? Use the Disqus form below to get involved! I will do my best to answer questions and feedback in this thread, as time allows.

blog comments powered by Disqus