FlexSlider Properties

WIP

FlexSlider hosts many features, and there's a chance you'll find yourself needing to read up on a few of them. Below is an overview table of the features available in FlexSlider, followed by detailed information and tips regarding each property.

Property	Default	Description
namespace	"flex-"	String Prefix string attached to the classes of all elements generated by the plugin.
selector	".slides > li"	Selector Must match a simple pattern. '{container} > {slide}'.
animation	"fade"	String Controls the animation type, "fade" or "slide".
easing	"swing"	String Determines the easing method used in jQuery transitions.
direction	"horizontal"	String Controls the animation direction, "horizontal" or "vertical"
reverse	false	Boolean Reverse the animation direction.
animationLoop	true	Boolean Gives the slider a seamless infinite loop.
smoothHeight	false	Boolean Animate the height of the slider smoothly for slides of varying height.
startAt	0	Number The starting slide for the slider, in array notation.
slideshow	true	Boolean Setup a slideshow for the slider to animate automatically.
slideshowSpeed	7000	Number Set the speed of the slideshow cycling, in milliseconds
animationSpeed	600	Number Set the speed of animations, in milliseconds
initDelay	0	Number Set an initialization delay, in milliseconds
randomize	false	Boolean Randomize slide order, on load
pauseOnAction	true	Boolean Pause the slideshow when interacting with control elements.
pauseOnHover	false	Boolean Pause the slideshow when hovering over slider, then resume when no longer hovering.
useCSS	true	Boolean Slider will use CSS3 transitions, if available
touch	true	Boolean Allow touch swipe navigation of the slider on enabled devices
video	false	Boolean Will prevent use of CSS3 3D Transforms, avoiding graphical glitches
controlNav	true	Boolean Create navigation for paging control of each slide.
customDirectionNav	""	jQuery Object/Selector Container the custom navigation markup works with.
directionNav	true	Boolean Create previous/next arrow navigation.
prevText	"Previous"	String Set the text for the "previous" directionNav item
nextText	"Next"	String Set the text for the "next" directionNav item
keyboard	true	Boolean Allow slider navigating via keyboard left/right keys.
multipleKeyboard	false	Boolean Allow keyboard navigation to affect multiple sliders.
mousewheel	false	Boolean (Dependency) Allows slider navigating via mousewheel
pausePlay	false	Boolean Create pause/play element to control slider slideshow.
pauseText	"Pause"	String Set the text for the "pause" pausePlay item
playText	"Play"	String Set the text for the "play" pausePlay item
controlsContainer	""	jQuery Object/Selector Container the navigation elements should be appended to.
manualControls	""	jQuery Object/Selector Define element to be used in lieu of dynamic controlNav.
sync	""	Selector Mirror the actions performed on this slider with another slider.
asNavFor	""	Selector Turn the slider into a thumbnail navigation for another slider.
itemWidth	0	Number Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin	0	Number Margin between carousel items.
minItems	0	Number Minimum number of carousel items that should be visible.
maxItems	0	Number Maximum number of carousel items that should be visible.
move	0	Number Number of carousel items that should move on animation.
start	empty	Function Fires when the slider loads the first slide.
before	empty	Function Fires asynchronously with each slider animation.
after	empty	Function Fires after each slider animation completes.
end	empty	Function Fires when the slider reaches the last slide (asynchronous).
added	empty	Function Fires after a slide is added.
removed	empty	Function Fires after a slide is removed.
rtl	false	Boolean Supports RTL functionality in the slider.
isFirefox	false	Boolean Test for if Firefox browser is in use.

namespace

namespace is a prefix string attached to the class names of all elements generated by the plugin.

Default: "flex-"
Accepts: String

<!-- Example generated elements -->
<ul class="flex-control-nav flex-paging">
  <li><a class="flex-active" href="#"></li>
  ...
</ul>

Hint: namespace can be a blank string to remove prefixing.

selector

selector is a string pattern used to select the container and slide elements within the plugin. The selector string should follow a precise pattern, '{container} > {slide}'.

Default: ".slides > li"
Accepts: selector

Example use:

// FlexSlider setup using custom selector
$(".slider").flexslider({
  selector: ".tabs > .tab"
});

<div class="slider">
  <div class="tabs">
    <div class="tab"> ... </div>
    <div class="tab"> ... </div>
  <div>
</div>

animation

animation will determine the animation type of the slider. Right now, there are only two types of animations, fade and slide.

Default: "fade"
Accepts: "fade" or "slide"

Tip: If you're using a fading slider, consider offering the slide animation to touch enabled devices. In the code below, I'm using Modernizr to check if touch events are available.

$(".flexslider").flexslider({
  animation: Modernizr.touch ? "slide" : "fade"
});

easing

easing allows support for jQuery easing! Default options provided by jQuery are "swing" and "linear" but more can be used by included the jQuery Easing plugin. If you chose a non-existent easing method, the slider will break.

Default: "swing"
Accepts: String

Note: You need to set useCCS: false to force transitions in browsers that support translate3d.

Optional Download: jQuery Easing Plugin

direction

direction will determine the sliding direction of the slider. Currently, the slider can slide "horizontal" and "vertical". This property has no effect on fading sliders.

Default: "horizontal"
Accepts: "horizontal" or "vertical"

Note: The vertical slide animation does not enjoy the same organic sizing as the horizontal animation, and the slides must be equal height. If you have slides of varying height while using the vertical direction, your slides will space incorrectly.

reverse

reverse is a boolean property that will determine if the slider animates left to right (normal), or right to left (reverse). This property works for both sliding directions and has no effect on fading sliders.

Default: false
Accepts: Boolean

animationLoop

animationLoop will allow sliders to have a seamless infinite loop. If false, directionNav elements will receive .flex-disable classes at either end. Carousel sliders with animationLoop active do not have a seamless infinite loop, but will still jump to either end.

Default: true
Accepts: Boolean

Note: When animationLoop is active, you'll notice the slider prevents actions while the slider is animating at either end. This is due to the clones requiring that the slider finishes its animation before safely proceeding.

smoothHeight

smoothHeight allows for smooth height transitions between slides of varying height. This property currently works for the fade and horizontal slide animation. The property has no effect on horizontal sliding carousels, however.

Default: false
Accepts: Boolean

startAt

startAt will determine the slide that the slider starts on. The value is set in array notation, so 0 is the first slide.

Default: 0
Accepts: Number

slideshow

slideshow allows the slider to have automatic animation. The slideshow will start automatically when enabled, and can be controlled in a number of ways. Usability properties (pauseOnAction and pauseOnHover), the callback API (slider.pause() or slider.play), and the pausePlay element give you the ability to interact with the slideshow interval.

Default: true
Accepts: Boolean

slideshowSpeed

slideshowSpeed sets the amount of time between each slideshow interval, in milliseconds.

Default: 7000
Accepts Number

animationSpeed

animationSpeed sets the duration in which animations will happen, in milliseconds.

Defaults: 600
Accepts: Number

Tip: If you're using a particularly slow animation speed (> 700), consider using a faster speed for touch enabled devices. This will offer a smoother experience to users, feeling more like native swiping.

$(".flexslider").flexslider({
  animation: "slide",
  animationSpeed: Modernizr.touch ? 400 : 1000
});

initDelay

initDelay sets an initial delay of the slider initialization, in milliseconds.

Defaults: 0
Accepts: Number

randomize

randomize will shuffle the order of slides during the slider initialization.

Defaults: false
Accepts: Boolean

pauseOnAction

pauseOnAction is the first usability feature for automatic slideshow control. This will pause the slider upon use of any of the slider controls. This is my preferred usability feature.

Defaults: true
Accepts: Boolean

pauseOnHover

pauseOnHover is the second usability feature for automatic slideshow control. This will pause the slideshow when hovering over the slider, and then resume when exiting.

Defaults: false
Accepts: Boolean

Note: Using the pausePlay element will set an internal property called slider.manualPause, keeping the slider paused while hovering out of the slider. You can also set slider.manualPause via the callback API.

useCSS

useCSS will determine whether the slider should utilize CSS transitions if they are available.

Defaults: true
Accepts: Boolean

Note: Setting this property to false is most applicable when forcing the use of the easing property or using video within your slider.

touch

touch will enable the slider with touch-swipe functionality.

Defaults: true
Accepts: Boolean

video

video is a pure convenience property, performing the same exact function as useCSS. Translate3D has well-known issues with video elements, so this will disable the use of CSS transitions and defer to jQuery transitions.

Defaults: false
Accepts: Boolean

controlNav

controlNav will create a set of dynamic paging elements to navigate the slides. Passing controlNav a value of "thumbnails" will dynamically generate images within the navigation items.

Defaults: true
Accepts: Boolean or "thumbnails"

Thumbnails:

<!-- Example markup for using the thumbnails pattern -->
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="image/path.jpg">
      <!-- slide content -->
    </li>
    <li data-thumb="image/path.jpg">
      <!-- slide content -->
    </li>
    <li data-thumb="image/path.jpg">
      <!-- slide content -->
    </li>
  </ul>
</div>

rtl

rtl adds RTL functionality in the slider.

Defaults: false
Accepts: Boolean

Markup changes:

<!-- Example markup adding direction style attribute -->
<div class="flexslider" style="direction:rtl>
  <ul class="slides">
    <li data-thumb="image/path.jpg">
      <!-- slide content -->
    </li>
    <li data-thumb="image/path.jpg">
      <!-- slide content -->
    </li>
    <li data-thumb="image/path.jpg">
      <!-- slide content -->
    </li>
  </ul>
</div>

isFirefox

isFirefox checks if the Firefox browser is being used. Since v56 there were some changes in FF that affects the fade and RTL transitions. This handles that.

Defaults: false
Accepts: Boolean