Author: | prjct-samwest |
---|---|
Views Total: | 5,322 views |
Official Page: | Go to website |
Last Update: | October 18, 2020 |
License: | MIT |
Preview:

Description:
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