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.