Touch-enabled Slider & Scroller – JPage

Category: Javascript , Recommended , Slider | March 19, 2023
Views Total:205 views
Official Page:Go to website
Last Update:March 19, 2023


Touch-enabled Slider & Scroller – JPage


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 class="section">
    <div class="slider">
      <div class="slide section1">
        Section 2 - Slide 1
      <div class="slide">
        Section 2 - Slide 2

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",


v2.0.2 (03/19/2023)

  • Bugfix

You Might Be Interested In:

Leave a Reply