Fullscreen Scrolling Presentation In JavaScript – Pageable

Pageable is a lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Supports both horizontal and vertical scrolling.

How to use it:

Import the main JavaScript file ‘pageable.js’ into the document.

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

Split your webpage into several sections with unique names using the ‘data-anchor’ attribute.

<main id="example">
  <section data-anchor="Page 1">
    Section 1
  </section>
  <section data-anchor="Page 2">
    Section 2
  </section>
  <section data-anchor="Page 3">
    Section 3
  </section>
  <section data-anchor="Page 4">
    Section 4
  </section>
  <section data-anchor="Page 5">
    Section 5
  </section>
  ...
</main>

Activate the Pageable.

new Pageable("#example");

Default options to customize the scrolling presentation.

new Pageable("#example",{
    // displays navigation pips
    pips: true,
    
    // animation speed
    animation: 300,
    // delay in ms
    delay: 0,
    // the interval in ms that the resize callback is fired
    throttle: 50,
    // swipe / mouse drag distance in px
    swipeThreshold: 50,
    // or 'horizontal'
    orientation: "vertical", 
    // drag / scroll freely instead of snapping to the next page
    freeScroll: false,
    // nav elements
    navPrevEl: false,
    navNextEl: false,
    // infinite scroll
    infinite: false, 
    // default: false
    slideshow: { // enable slideshow
      interval: 3000,
      delay: delay
    },
    // easing function
    easing: function easing(t, b, c, d, s) {
     return -c * (t /= d) * (t - 2) + b;
    },
    // child selector
    childSelector: '[data-anchor]',
    
});

Callback functions available.

new Pageable("#example",{
    onInit: () => {},
    onBeforeStart: () => {},
    onUpdate: () => {},
    onStart: () => {},
    onScroll: () => {},
    onFinish: () => {},
});

Enable/disable trigger events.

new Pageable("#example",{
    events: {
      wheel: true,
      mouse: true,
      touch: true,
      keydown: true
    }
});

API methods.

// Scroll to next page.
instace.next();
// Scroll to previous page.
instace.prev();
// Scroll to a specific
instace.scrollToPage(index);
// Scroll to a specific anchor
instace.scrollToAnchor(anchor);
// Set the orientation
// 'vertical' or 'horizontal'
instace.orientate(orientation);
// Stop the slideshow
instace.slideshow().stop();
// start/resume the slideshow
instace.slideshow().start();

Event handlers.

instance.on("init", data => {
  // on init
});
instance.on("update", data => {
  // on update
});
instance.on("scroll.before", data => {
  // before scroll
});
instance.on("scroll.start", data => {
  // when scrolling
});
instance.on("scroll", data => {
  // during scroll
});
instance.on("scroll.end", data => {
  // after scrolling
});

Changelog:

v0.6.8 (03/25/2019)

• Fix IE10 compatability

v0.6.7 (03/19/2019)

• updated

v0.6.6 (03/10/2019)

• Added anchors option.

v0.6.5 (02/12/2019)

• Fixed drag and freeScroll not working.

v0.6.4 (12/15/2018)

• Allow toggling of keyboard navigation
• Add option for custom child selector

v0.6.1 (12/15/2018)

• fix clones error

v0.6.0 (12/10/2018)

• support IE9 and above

v0.5.5 (12/09/2018)

• fix touch controls

v0.5.4 (11/29/2018)

• update

v0.4.3 (11/27/2018)

• update

v0.4.0 (11/27/2018)

• added more options

v0.3.9 (11/26/2018)

• Fixed: Array.from not supported in IE11

11/20/2018

• Refactor

11/14/2018

• v0.3.6: hot fix

11/13/2018

• v0.3.4: Force remove delay with freeScroll

11/13/2018

• Fix scrolling bug

10/31/2018

• v0.2.3: add swipeThreshold

09/17/2018

• v0.2.2

09/14/2018

• Added an option to disable events like touch and scroll for pwa