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

Category: Javascript , Recommended , Slider | August 27, 2020
Author:elansx
Views Total:248 views
Official Page:Go to website
Last Update:August 27, 2020
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply