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:

namespace	String	Default “flex. – Prefix string attached to the class of every element generated by the plugin
selector	String	Default ‘slides Ii” Must match a simple pattern. ‘{container} A {slide}’ — Ignore pattern at your own peril
animation	String	Default “fade” Select your animation type, “fade” or “slide”
easing	String	Default “swing” Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction	String	Default “horizontal” Select the sliding direction, “horizontal” or “vertical”
reverse	Boolean	Default false Reverse the animation direction
animationLoop	Boolean	Default true Should the animation loop? If false, directionNav will received “disable” classes at either end
smoothHeight	Boolean	Default false Allow height of the slider to animate smoothly in horizontal mode
startAt	Integer	Default 0 The slide that the slider should start on. Array notation (0 = first slide)
slideshow	Boolean	Default true Animate slider automatically
slideshowSpeed	Integer	Default 7000 Set the speed of the slideshow cycling, in milliseconds
animation Speed	Integer	Default 600 Set the speed of animations, in milliseconds
initDelay	Integer	Default 0 Set an initialization delay, in milliseconds
randomize	Boolean	Default false Randomize slide order
pauseOnAction	Boolean	Default true Pause the slideshow when interacting with control elements, highly recommended
pauseOnHover	Boolean	Default false Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS	Boolean	Default true Slider will use CSS3 transitions if available
touch	Boolean	Default true Allow touch swipe navigation of the slider on touch-enabled devices
video	Boolean	Default false If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
controlNav	Boolean	Default true Create navigation for paging control of each slide? Note: Leave true for manualControls usage
directionNav	Boolean	Default true Create navigation for previous/next navigation? (true/false)
prevText	String	Default “Previous – Set the text for the “previous” directionNav item
nextText	String	Default : “Next” Set the text for the “next” directionNav item
keyboard	Boolean	Default true Allow slider navigating via keyboard left/right keys
multipleKeyboard	Boolean	Default false Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel	Boolean	Default false Requires jquery.mousewheel.j js (https://github.com/brandonaaron/jquery- mousewheel) Allows slider navigating via mousewheel
pausePlay	Boolean	Default false Create pause/play dynamic element
pauseText	String	Default “Pause” Set the text for the “pause” pausePlay item
playText	String	Default “Play” Set the text for the “play” pausePlay item
controlsContainer	String	Default 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	String	Default 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	String	Default Mirror the actions performed on this slider with another slider. Use with care.
asNavFor	String	Default Internal property exposed for turning the slider into a thumbnail navigation for another slider
itemWidth	Integer	Default : 0 Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin	Integer	Default 0 Margin between carousel items.
minitems	Integer	Default : 0 Minimum number of carousel items that should be visible. Items will resize fluidly when below this
maxItems	Integer	Default 0 Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move	Integer	Default : 0 Number of carousel items that should move on animation. If 0, slider will move all visible items.

Screenshots:

FlexSlider: Awesome image slider and fully responsive jQuery slider plugin

About me