One Page Scroll Effect In Vanilla JavaScript – docSlider.js

docSlider.js is a lightweight vertical/horizontal one page scroll (page slider) JavaScript library that supports side navigation, keyboard interactions, scrollable elements, and anchor links.

How to use it:

1. Import the stylesheet docSlider.css and JavaScript docSlider.js.

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

2. Add fullscreen sections to a container named docSlider. To enable the anchor links you need to specify a unique ID for each section as follows:

<div class="docSlider">
  <section id="one">...</section>
  <section id="two">...</section>
  <section id="three">...</section>
</div>

3. Initialize the docSlider.js library.

docSlider.init();

4. Customize the transition effect when switching between page sections.

docSlider.init({
  speed : 600,
  startSpeed : null,
  easing : 'ease',
  scrollReset : false
});

5. Determine whether or not to show the side navigation. Default: true.

docSlider.init({
  pager: false
});

6. Change the direction of the slider. Default: false.

docSlider.init({
  horizontal: true
});

7. Callback functions.

/* parameters:
options   : options object value.
elements  : docSlider's elements object. {wrapper, pages, pager, buttons}
index     : current page index value.
page      : current page element.
toIndex   : destination page index value.
toPage    : destination page element.
fromIndex : source page index value.
fromPage  : source page element.
type      : page change type. "scroll" / "pager" / "anchor" / "key" / "focus" / "jumpPage" / "nextPage" / "prevPage"
*/
docSlider.init({
  complete : function (options) {},
  beforeChange: function (index,page,toIndex,toPage,type) {},
  afterChange: function (index,page,fromIndex,fromPage,type) {}
});

8. API methods.

// go to a specific section
docSlider.jumpPage(indexOrId, speed, easing);
// go to the next section
docSlider.nextPage(speed, easing);
// go to the previous section
docSlider.prevPage(speed, easing);
// enable/disable the instance
docSlider.enable(true/false);
// get data
docSlider.getOptions();
docSlider.getElements();
docSlider.getCurrentIndex();
docSlider.getCurrentPage();

9. CSS setting functions.

/* parameters:
index : page element's index value.
currentIndex : current page element's index value.
horizontal : horizontal mode boolean value.
speed : option's speed values
easing : option's easing values
*/
docSlider.init({
  setInitCss: function(index, horizontal){
    const point = horizontal ? 'left' : 'top';
    const style = {};
    style[point] = index * 100 + '%';
    return style;
  },
  function (index, currentIndex, speed, easing, horizontal) {
    const xy = horizontal ? 'X' : 'Y';
    const style = {};
    style.transitionProperty = 'transform';
    style.transitionDuration = speed + 'ms';
    style.transitionTimingFunction = easing;
    style.transform = 'translate' + xy + '(-' + currentIndex * 100 + '%)';
    return style;
  }
});

Changelog:

v3.0.1 (10/18/2020)

• bugfix

10/09/2020

• Added the ability to combine with scrollCue.js
• Added the new options. scrollReset

06/06/2020

• bugfix

06/04/2020

• v2.0.0