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);