Horizontal Fullpage Scroller In Vanilla JavaScript – hps.js

hps.js is a horizontal fullpage scroller JavaScript library that allows you to scroll through a series of full window page sections with mouse wheel and touch events.

How to use it:

Create the slides for the fullpage scroller.

<div class="page-wrapper">
  <section class="content-parent" id="intro">
      <h1 class="text-center">Imma first bruh!</h1>
  </section>
  <section class="content-parent" id="intro2">
    <h1 class="text-center">Second section :)</h1>
  </section>
  <section class="content-parent" id="intro3">
    <h1 class="text-center">Third section :D</h1>
  </section>
  <section class="content-parent" id="intro4">
    <h1 class="text-center">Fourth section :3</h1>
  </section>
  <section class="content-parent" id="intro5">
    <h1 class="text-center">Fifth...</h1>
  </section>
  <section class="content-parent" id="intro6">
    <h1 class="text-center">This is the end</h1>
  </section>
</div>

Download and place the JavaScript file ‘hps.js’ at the bottom of the html page.

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

Initialize the library and you’re done.

var scroller = new HPS('.page-wrapper');

The possible options with default values.

var scroller = new HPS('.page-wrapper',{
    ectionClass: 'hps-section',
    scrollCallback: false,
    touchMult: -2,
    firefoxMult: 15,
    mouseMult: 1,
    ease: 0.1,
    controls: {
      append: true,
      elementClass: 'hps-controls',
      prevButtonClass: 'hps-control-prev',
      nextButtonClass: 'hps-control-next'
    }
});