Smooth Vertical Full Page Slider with jQuery - sailnote.js

Smooth Vertical Full Page Slider with jQuery - sailnote.js
File Size: 4.46 KB
Views Total: 3988
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

sailnote.js is a jQuery page slider that makes block elements 100% height & width so that the visitor can navigate through them with vertical scrolling effects. The plugin currently supports mouse wheel, up / down keys and touch swipe to scroll through these full page slides

How to use it:

1. Add jQuery library and the JQuery sailnote.js into your html document.

<script src="//"></script>
<script src="sailnote.js"></script>

2. Create block elements (full page slides) for the page slider.

<div class="sn-slide">Section One</div>
<div class="sn-slide">Section Two</div>
<div class="sn-slide">Section Three</div>
<div class="sn-slide">Section Four</div>
<div class="sn-slide">Section Five</div>

3. Initialize the plugin and we're done.


4. You can add custom scrolling effects to each slide as it's scrolled into view.

<!-- specify the effect name via sn-id attribute -->
<div class="sn-slide" sn-id="fadeIn">Section Two</div>
// custom the scrolling effect in the javascript
Sailnote.on('enter', 'fadeIn', function(note){
  note.css('opacity', '0');
  note.animate({'opacity': '0.8'}, 2000);

5. You can also add custom next / prev buttons to the full page slides using the following APIs.

// go to next;

// go back

This awesome jQuery plugin is developed by kennyt. For more Advanced Usages, please check the demo page or visit the official website.