Horizontal Page Slider With Pure JavaScript – Sideways

Preview:

Description:

Sideways.js is a vanilla JavaScript slider plugin for single page app orpresentation page that enables the user to slide through a group of fullscreen page slides with custom navigation controls.

How to use it:

Insert the main JavaScript file into the webpage.

<script src="index.js"></script>

Add slides to the webpage following the HTML markup like this.

<div class="sideways">
  <div class="pages">
    <section class="page page-1">
      <div class="page-right">Navigation(Right)</div>
    </section>
    <section class="page page-2">
      <div class="page-left">Navigation(left)</div>
      <div class="page-right">Navigation(Right)</div>
    </section>
   ...
    <section class="page page-last">
      <div class="page-left">Navigation(left)</div>
    </section>
  </div>
</div>

Initialize the Sideways and specify the initial slide.

sideways.init(1)

API methods.

// Gets the current page
sideways.getCurrentPage()

// Returns an array of pages
sideways.getPages()

// Slides to a specified page
sideways.moveTo(pageNumber)

// Slides to the previous page
sideways.moveLeft()

// Slides to the next page
sideways.moveRight()

// Slides to a specified page (to left)
sideways.movePageToLeft(pageNumber)

// Slides to a specified page (to right)
sideways.movePageToRight(pageNumber)

// A promise-based implementation of setTimeout useful for async functions.
sideways.delay(ms)