Simple Full Screen Vertical Slider using CSS3 transitions followed up by a jQuery fallback.
Bound events support mousewheel, click and drag, arrow keys and touch gestures.
https://github.com/lukesnowden/FSVS
$(document).ready( function() {
// The HTML tag must have a class of fsvs
var fsvs = $.fn.fsvs({
speed : 1000
});
});
<!doctype html>
<html class="fsvs" lang="en">
<body>
<div id="fsvs-body">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</body>
</html>
$(document).ready( function() {
var fsvs = $.fn.fsvs({
speed : 5000,
bodyID : 'fsvs-body',
selector : '> .slide',
mouseSwipeDisance : 40,
afterSlide : function(){},
beforeSlide : function(){},
endSlide : function(){},
mouseWheelEvents : true,
mouseDragEvents : true,
touchEvents : true,
arrowKeyEvents : true,
pagination : true,
nthClasses : false,
detectHash : true
});
});
$(document).ready( function() {
var slider = $.fn.fsvs({
...
endSlide : function(index) {
$('<div class="slide"><h2>Slide ' + (index+2) + '</h2></div>').appendTo( $('body') );
// reset the nth classes if you need it
slider.nthClasses(3);
// rebind pagination if you need it
slider.addPagination();
}
...
});
});