Vertical Full Screen Page Slider With JavaScript

Preview:

Description:

This is a vertical fullscreen page slider where the users are able to switch between page slides with mouse wheel, arrow keys and touch swipe. Great for one-page scrolling landing page.

How to use it:

Link to the page slider’s JavaScript and CSS files.

<script src="slider.js"></script>
<link rel="stylesheet" href="slider.css">

Create your own slides for the page slider.

<div class="slides">
  <section id="norwegian"><span>Hallo</span></section>
  <section id="french"><span>Bonjour</span></section>
  <section id="spanish"><span>Hola</span></section>
  <section id="hindi"><span>Namaste</span></section>
  <section id="mandarin"><span>你好</span></section>
</div>

Initialize the page slider and done.

slider('.slides');

Go to a specific slide.

mySlider.gotoSlide('#target');

Changelog:

07/27/2019

• JS & CSS update