FlexSlider

http://www.woothemes.com/flexslider/

Get started with FlexSlider in 3 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.

namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin

selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril

animation: "fade", //String: Select your animation type, "fade" or "slide"

easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!

direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"

reverse: false, //{NEW} Boolean: Reverse the animation direction

animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end

smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)

slideshow: true, //Boolean: Animate slider automatically

slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds

animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds

initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds

randomize: false, //Boolean: Randomize slide order

// Usability features

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

useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available

touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices

video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

// Primary Controls

controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage

directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)

prevText: "Previous", //String: Set the text for the "previous" directionNav item

nextText: "Next", //String: Set the text for the "next" directionNav item

// Secondary Navigation

keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys

multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.

mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel

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

// Special properties

controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.

manualControls: "", //Selector: Declare custom control navigation. Examples 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.

sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.

asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

// Carousel Options

itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.

itemMargin: 0, //{NEW} Integer: Margin between carousel items.

minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.

maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.

move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.

// Callback API

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)

added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added

removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed

Advanced:

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 controlsContainerproperty. In the markup below, I created a <div class=”flex-container”> to encompass my slider element. Then, just set thecontrolsContainer 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.play() //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.