Touch-enabled Slider & Scroller – JPage

Preview:

Description:

JPage is a fullscreen page slider JavaScript library that converts page sections into a combination of touch-enabled sliders and scrollers.

Users can switch between pages and slides with mouse wheel and touch swipe events.

How to use it:

1. Load the JPage’s JavaScript and CSS files from lib folder.

<link rel="stylesheet" href="./lib/index.min.css" />
<script src="./lib/index.min.js" type="module"></script>

2. Wrap your page sections into a DIV container with the CSS class of ‘jpage’.

<div class="jpage">
  <div class="section section1">
    <h1>Section 1</h1>
  </div>
  <div class="section">
    <div class="slider">
      <div class="slide section1">
        Section 2 - Slide 1
      </div>
      <div class="slide">
        Section 2 - Slide 2
      </div>
    </div>
  </div>
</div>

3. Initialize the JPage and done.

const sections = document.querySelectorAll(".jpage .section")

4. Config the Jpage.

const jpageConfig = {
  scroller: {
    showControls: true,
    waitingTime: 400,
    afterSections: {
      // shows menu after page sections
      menuVisible: false,
    }
  },
  slider: {
    showControls: true,
  },
  menu: {
    buttonIconToClose: "x",
    buttonIconToOpen: "o",
  },
}

Changelog:

v2.0.2 (03/19/2023)

• Bugfix