Smooth Horizontal Page Slider – pgSlider.js

Preview:

Description:

pgSlider.js is a lightweight JavaScript library for sliding smoothly and horizontally through a set of full-window content sections by clicking on the left/right navigation bars.

How to use it:

Load the following JavaScript and CSS files in the document when needed.

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

The basic html structure for the page slider.

<section id="ps-container" class="">
  <div class="ps-wrapper">
    <section class="ps-page">
        <h1>Page One</h1>
    </section>
    <section class="ps-page">
        <h1>Page Two</h1>
    </section>
    <section class="ps-page">
        <h1>Page Three</h1>
    </section>
  </div>
  
</section>

That’s it. Feel free to customize the page slider using your own CSS styles.