Awesome Open Source
Awesome Open Source

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


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Html (264,751
Jquery (26,517
Slides (13,420
Navigation (8,847
Slider (4,876
Scrolling (3,655