Change Web Sections to One Page Scrolling Effect In JavaScript Plugin

docSlider.js is a JavaScript plugin that works without jQuery. This plugin is a lightweight vertical/horizontal one-page scrolling JS library that supports side navigation, keyboard interactions, scrollable elements, and anchor links.

How to make use of 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 allow the anchor links you should specify a singular ID for every 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 web page sections.

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

5. Determine whether or not or to not show the aspect navigation.

docSlider.init({
  pager: false
});

6. Change the path of the slider.

docSlider.init({
  horizontal: true
});

7. Callback features.

/* 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 strategies.

// 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 features.

/* 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;
  }
});

One Page Scroll Effect In Vanilla JavaScript, docSlider.js Plugin/Github