One Page Scroll Sections Plugin In JavaScript | Whole Page Slider

Full Page Slider, Supports mouse wheel, mouse drag, and contact swipe event.

Advantages:

• No dependencies
• Written in pure JavaScript
• Works great on mobile devices and desktop devices
• Keyboard – arrow key support
• Automatically generate navigation (buttons) based on sections and pages

How to make use of it:

1. Download the package deal and insert the wanted JavaScript and CSS information into the doc.

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

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

<div id="wholepage">
  
  <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>
    <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 class="12ad1b714cee56cbe467c89bb0b8e105" data-index="3" style="float: none; margin:10px 0 10px 0; text-align:center;"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display: block; text-align: center; height: 138px;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5124548465596960" data-ad-slot="5747123887" data-adsbygoogle-status="done"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:138px;margin:0;padding:0;position:relative;visibility:visible;width:549px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:138px;margin:0;padding:0;position:relative;visibility:visible;width:549px;background-color:transparent;"></ins></ins></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div>

    </div>  
    <div class="page">
      <h1>Section 2.3</h1>
      <p>Section 2.3</p>
    </div>       
  </section>
  
</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 a parent, section, and web page containers.

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

Horizontal & Vertical One Page Scroll Plugin, Full-Screen Scrolling Sections

See Demo And Download