jQuery & CSS3 Based Fullscreen Vertical Page Slider - FSVS
| File Size: | 28.4 KB |
|---|---|
| Views Total: | 14951 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
FSVS is a jQuery plugin for single page website that allows you to create a fullscreen vertical page slider with CSS3 transitions.
Features:
- CSS3 powered smooth sliding animation.
- Mouse, keyboard and touch gesture navigation.
- Side pagination.
- Scroll snapping.
- Supports detecting hash-tags.
How to use it:
1. Load the jQuery library and the jQuery FSVS plugin in your website.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="fsvs.js"></script>
2. The basic Html markup. The HTML tag must have a class of 'fsvs'.
<html class="fsvs" lang="en"> <body> <div id="fsvs-body"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2</div> <div class="slide"> Slide 3</div> </div> </body> </html>
3. Initialize the plugin to enable the page slider.
$(document).ready( function() {
var slider = $.fn.fsvs({
el : null,
speed : 5000,
autoPlay : false,
bodyID : 'fsvs-body',
mouseSwipeDisance : 40,
afterSlide : function(){},
beforeSlide : function(){},
endSlide : function(){},
mouseWheelEvents : true,
mouseWheelDelay : false,
scrollableArea : 'scrollable',
mouseDragEvents : true,
touchEvents : true,
arrowKeyEvents : true,
pagination : true,
nthClasses : false,
detectHash : true,
slideClass : "slide",
selector : '> .' + this.slideClass,
});
});
4. Style the page slider whatever you like in CSS.
.fsvs {
...
}
.fsvs-body {
...
}
.slide {
...
}
Change log:
2017-03-14
- fixed for IE 11
2015-07-11
- added auto play
This awesome jQuery plugin is developed by lukesnowden. For more Advanced Usages, please check the demo page or visit the official website.
