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:
