Slider Flow
JQuery slider with scrolling navigation
Need JQuery http://jquery.com/download/ and JQuery UI http://jqueryui.com/
Version 0.2
- new parameter {equalHeight : true}. Sets the height of each cell is the largest cell
How to use
1. First need connect jquery.sliderFlow script
<script src=”jquery.sliderFlow.min.js”></script>
2. Create HTML
<div id="slider">
<ul class="slider-container">
<li class="slide"></li>
...
<li class="slide"></li>
</ul>
</div>
3. Initialization function for the desired element
$(function() {
$('#slider').sliderFlow({
container : '.slider-container',
navigation : '.slider-navigation',
slide : '.slide',
equalHeight : true,
speed : 300
});
});
- container -
<ul>
containter class. - navigation - class for navigation line.
- slide - class one slide.
- speed - speed of transition to new slide.
- equalHeight - sets the height of each cell is the largest cell.
Rebuild slider for new items
$('#slider').trigger('rebuild');
Check changes slides
$('#slider').on('slidechange', function(e, a){
// a - value of index current slide.
console.log(a);
});
Go to specified slide
var slideIndex = 4;
$('#slider').trigger('slideTo', slideIndex);