Press "Enter" to skip to content

One Page Scroll Sections Plugin In JavaScript | Whole Page Slider

One Page Scroll Sections – A mobile-friendly fullscreen web page slider JavaScript plugin that applies horizontal and vertical one-page scrolling results to sectioned pages inside the doc. One web page scrolling touchdown pages, single web page net purposes, net-primarily based displays, and so on.

one page scroll example, jquery one page scroll animation, one page scroll css, one page scroll jquery, one page scroll javascript, fullpage js horizontal scroll

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

Official Website(elansx): Click Here

This superior jQuery/javascript plugin is developed by elansx. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *