FlexSlider: Awesome image slider and fully responsive jQuery slider plugin

An awesome, fully responsive jQuery slider plugin.

  • 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
  • Basic slider
  • Slider w/thumbnail controlnav pattern
  • Slider w/thumbnail slider
  • Basic carousel
  • Carousel with min and max ranges
  • Video & the api (vimeo)

Download: https://github.com/woocommerce/FlexSlider

Demonstration: http://flexslider.woothemes.com/

Plugin homepage: https://woocommerce.com/flexslider/

Implementation:

1. First, include CSS and jQuery files

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

2. Build your HTML code

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

3. Make the plugin call

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
 
    //simple FlexSlider call
    $('.flexslider').flexslider();
 
    // more complex call
    $('.flexslider').flexslider({
         animation: "slide",
         controlsContainer: ".flex-container",
         start: function(slider) {
           $('.total-slides').text(slider.count);
         },
         after: function(slider) {
           $('.current-slide').text(slider.currentSlide);
         }
    });
  });
</script>

Multiple Flexslider in your page ?

<!-- 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>
 
<!-- 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>

Options:

namespaceStringDefault “flex. – Prefix string attached to the class of every element generated by the plugin
selectorStringDefault ‘slides Ii” Must match a simple pattern. ‘{container} A {slide}’ — Ignore pattern at your own peril
animationStringDefault “fade” Select your animation type, “fade” or “slide”
easingStringDefault “swing” Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
directionStringDefault “horizontal” Select the sliding direction, “horizontal” or “vertical”
reverseBooleanDefault false Reverse the animation direction
animationLoopBooleanDefault true Should the animation loop? If false, directionNav will received “disable” classes at either end
smoothHeightBooleanDefault false Allow height of the slider to animate smoothly in horizontal mode
startAtIntegerDefault 0 The slide that the slider should start on. Array notation (0 = first slide)
slideshowBooleanDefault true Animate slider automatically
slideshowSpeedIntegerDefault 7000 Set the speed of the slideshow cycling, in milliseconds
animation SpeedIntegerDefault 600 Set the speed of animations, in milliseconds
initDelayIntegerDefault 0 Set an initialization delay, in milliseconds
randomizeBooleanDefault false Randomize slide order
pauseOnActionBooleanDefault true Pause the slideshow when interacting with control elements, highly recommended
pauseOnHoverBooleanDefault false Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSSBooleanDefault true Slider will use CSS3 transitions if available
touchBooleanDefault true Allow touch swipe navigation of the slider on touch-enabled devices
videoBooleanDefault false If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
controlNavBooleanDefault true Create navigation for paging control of each slide? Note: Leave true for manualControls usage
directionNavBooleanDefault true Create navigation for previous/next navigation? (true/false)
prevTextStringDefault “Previous – Set the text for the “previous” directionNav item
nextTextStringDefault : “Next” Set the text for the “next” directionNav item
keyboardBooleanDefault true Allow slider navigating via keyboard left/right keys
multipleKeyboardBooleanDefault false Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheelBooleanDefault false Requires jquery.mousewheel.j js (https://github.com/brandonaaron/jquery- mousewheel) Allows slider navigating via mousewheel
pausePlayBooleanDefault false Create pause/play dynamic element
pauseTextStringDefault “Pause” Set the text for the “pause” pausePlay item
playTextStringDefault “Play” Set the text for the “play” pausePlay item
controlsContainerStringDefault 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.
manualControlsStringDefault 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.
syncStringDefault Mirror the actions performed on this slider with another slider. Use with care.
asNavForStringDefault Internal property exposed for turning the slider into a thumbnail navigation for another slider
itemWidthIntegerDefault : 0 Box-model width of individual carousel items, including horizontal borders and padding.
itemMarginIntegerDefault 0 Margin between carousel items.
minitemsIntegerDefault : 0 Minimum number of carousel items that should be visible. Items will resize fluidly when below this
maxItemsIntegerDefault 0 Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
moveIntegerDefault : 0 Number of carousel items that should move on animation. If 0, slider will move all visible items.

Screenshots:

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…

jQuery slideViewerPro: A “pro” jQuery image slider

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstandin…

jQuery Optimization: Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability …