Minimal Page Slideshow Library – onePage.js

The lightweight onePage.js JavaScript library helps you create fullscreen slideshow/presentation for your one-page website.  The users are allowed to switch between pages with mouse wheel or by clicking on the navigation buttons.

How to use it:

Code the sectioned pages and navigation buttons:

<div id="container" class="sections-container">
  <nav class="navbar">
    <button type="button" class="link active">
      Home
    </button>
    <button type="button" class="link">
      About
    </button>
    <button type="button" class="link">
      Contact
    </button>
  </nav>
  <section class="section">
    Home
  </section>
  <section class="section">
    About
  </section>
  <section class="section">
    Contact
  </section>
</div>

Load the onePage’s JavaScript and CSS files at the end of the html document.

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

Create a new OnePage object with some options.

const page = new OnePage({
      mode: 'stack', // or normal
      navbar: true // shows navigation bar
})

Initialize the OnePage.

page.initPage()