Smooth Full-page Slider Plugin with Parallax Effects - Vertical Slider

A jQuery plugin which helps you create a responsive, touch-enabled, vertical page slider with smooth parallax scrolling effects.

Features:

• Allows you to scroll through page content via mouse wheel, arrow keys, touch swipe and arrows navigation.
• Touch gesture events supported. Requires hammer.js.
• Smooth accelerated javaScript animations based on Velocity.js.

How to use it:

1. Load the vertical-slider.css for basic slider styles.

<link rel="stylesheet" href="css/vertical-slider.css">

2. Add the sectioned content with a next / prev navigation into your webpage.

<div class="vs-slider">
  <div class="vs-section active">
    <h2>Section 1</h2>
  </div>
  <div class="vs-section">
    <h2>Section 2</h2>
  </div>
  <div class="vs-section">
    <h2>Section 3</h2>
  </div>
  <div class="vs-section">
    <h2>Section 4</h2>
  </div>
  <div class="vs-section">
    <h2>Section 5</h2>
  </div>
  <nav>
    <ul class="vs-vertical-nav">
      <li><a href="#" class="vs-prev">Next</a></li>
      <li><a href="#" class="vs-next">Prev</a></li>
    </ul>
  </nav>
</div>

3. Style the next / prev navigation whatever you like.

.vs-vertical-nav {
  position: fixed;
  z-index: 1;
  top: 50%;
  right: 3%;
  bottom: auto;
  display: block;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.vs-vertical-nav a {
  display: block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  white-space: nowrap;
  text-indent: 100%;
  background: url('../images/cd-icon-arrow.svg') no-repeat center center;
}

.vs-vertical-nav a.vs-prev {
  margin-bottom: 10px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

4. Load jQuery library and other required resources at the end of the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="hammer.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script src="js/vertical-slider.js"></script>

5. Initialize the vertical page slider.

verticalSlider.init(CALLBACK);

6. Variables.

// Variables defined by the user
scrollThreshold: 1,
sectionsContainer: null,
sections: null,
infoSelector: null, // Element on which informational classes will be put (current section index, last section...)

// Other variables
animating: false,
currentSection: null,
animationsSettings: {
  visible: 'translateNone',
  top:     'translateUp.half',
  bottom:  'translateDown',
  easing:  'easeInCubic',
  duration: 800,
  scrollDelay: 400 // This delays is here to avoid sections jumps when scrolling with a trackpad
},

Change logs:

2015-08-12

• Velocity effects are now registred on construct of the VerticalSlider instance instance only if the user did not change the animations settings

2015-08-11

• Changed the scope of the mouswheel event so it triggers only if the user points the section container of the vertical slider

2015-08-07

• Added a function to transform vh values to px values on mobile

2015-07-01

• Added a scrollDelay variable to avoid sections jump when scrolling with a trackpad
• Added mousewheel jquery plugin to manage better scroll events

2015-06-30

• Added a callback when the slider is initialised

---

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