jQuery & CSS3 Based Fullscreen Vertical Page Slider - FSVS

File Size: 28.4 KB
Views Total: 14879
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery & CSS3 Based Fullscreen Vertical Page Slider - FSVS

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.