Horizontal & Vertical One Page Scroll Plugin In JavaScript – Wholepage Slider

Preview:

Description:

A mobile-friendly fullscreen page slider JavaScript plugin that applies horizontal and vertical one-page scrolling effects to sectioned pages within the document.

Great for one page scrolling landing pages, single page web applications, web based presentations, etc.

Supports mouse wheel, mouse drag, and touch swipe event.

How to use it:

1. Download the package and insert the needed JavaScript and CSS files into the document.

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

2. Create fullscreen sections with sub-pages as follows:

<div id="wholepage">
  <!-- Section 1 -->
  <section>
    <div class="page">
      <h1>Section 1.1</h1>
      <p>Section 1.1</p>
    </div>  
    <div class="page">
      <h1>Section 1.2</h1>
      <p>Section 1.2</p>
    </div>  
    <div class="page">
      <h1>Section 1.3</h1>
      <p>Section 1.3</p>
    </div>       
  </section>
  <!-- Section 2 -->
  <section>
    <div class="page">
      <h1>Section 2.1</h1>
      <p>Section 2.1</p>
    </div>  
    <div class="page">
      <h1>Section 2.2</h1>
      <p>Section 2.2</p>
    </div>  
    <div class="page">
      <h1>Section 2.3</h1>
      <p>Section 2.3</p>
    </div>       
  </section>
  <!-- More Sections Here -->
</div>

3. Initialize the Wholepage Slider plugin and apply background colors for sections.

new WholePageSlider({
    colors: ['color 1', 'color 2', ...]
})

4. Override the default selectors of parent, section, and page containers.

new WholePageSlider({
    containerId: document.body,
    sectionClass: 'section',
    pageClass: 'page'
})

Changelog:

08/27/2020

• Fixed: slides “freezing” when scrolling fast