• Stars
    star
    2
  • Language
    HTML
  • Created about 10 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JQuery adaptive slider with scrolling navigation

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