TOC

Basic

Features

Advanced

Overview

docSlider.js is a JavaScript plugin that works without jQuery.
Change the web sections to a one-page scroll.
It works on modern browser as Chrome, Firefox, Safari, Edge, IE11.

docSlider.js

Demo

https://prjct-samwest.github.io/docSlider/

Version

The latest version is -

License

Created by SamWest.
Copyright (c) 2020 SamWest.
This plugin is released under the MIT License.

Install

Install it from npm or download the file.

npm install

npm install docslider

File Download

aaa

Usage

1. Include the CSS and JavaScript files

Add a CSS to the <head> tag.

<link rel="stylesheet" href="docSlider.css">

Add a JavaScript to just before the </body> tag.

<script src="docSlider.min.js"></script>

2. HTML markup

<div class="docSlider">
    <section>...</section>
    <section>...</section>
    <section>...</section>
</div>

3. Initialize docSlider.js

<script>docSlider.init();</script>

Options

Option Type Default Description
speed int 600 Page change speed.(ms)
easing string "ease" Page change easing animation.
It corresponds to the CSS property "transition-timing-function".
pager boolean true Show pager buttons.
horizontal boolean false Horizontal scroll mode.
startSpeed int null Page change speed when jumping from an external page using a hashtag. (ms)
If not set, it will be set to the same value as "speed".
scrollReset boolean false If the page is a scrolling element, it resets the scrolling value at each page change.
complete function Callback function. See Callback functions for details.
beforeChange function
afterChange function
setInitCss function CSS setting function. See CSS Setting functions for details.
setChangeCss function

Examples

// change the speed
docSlider.init({
    speed : 500
});

// change the speed and easing
docSlider.init({
    speed : 500,
    easing : 'ease-in-out'
});

Methods

Method Arguments Description
init options Initialize docSlider.js.
jumpPage to, speed, easing Jump to any page.
nextPage speed, easing Jump to next page.
prevPage speed, easing Jump to previous page.
getOptions - Gets an options object value.
getElements - Gets docSlider.js's Elements object value.
getCurrentIndex - Gets an current page index value.
getCurrentPage - Gets an current page element.
enable toggle (boolean) Enable / disable all docSlider.js's operations.

jumpPage method Example

docSlider.jumpPage(2);  // Jumps to the page with index number 2 (page 3).

jumpPage method example (using a hashtag)

docSlider.jumpPage('bar');  // Jumps to the page with id name 'bar' (page 2).

If you want to use hashtag jump, you need to set the ID name if necessary.

<div class="docSlider">
  <section id="foo">...</section>
  <section id="bar">...</section>
  <section id="baz">...</section>
</div>

Supports key-press

Key Description
[ Space ] / [ PageDown ] / [ ArrowDown ] Scroll down / jump to next page.
[ Shift ] + [ Space ] / [ PageUp ] / [ ArrowUp ] Scroll up / jump to previous page.
[ End ] Jump to last page.
[ Home ] Jump to first page.
[ Tab ] Jump to next page.
[ Shift ] + [ Tab ] Jump to previous page.
[ ArrowRight ] Jump to next page. (horizontal mode only)
[ ArrowLeft ] Jump to previous page. (horizontal mode only)

Jump from external site to any page

Just link like you would a normal anchor link.

<a href="index.html#baz">jump to #baz page</a>

If you want to use hashtag jump, you need to set the ID name if necessary.

<div class="docSlider">
  <section id="foo">...</section>
  <section id="bar">...</section>
  <section id="baz">...</section>
</div>

Supports scroll elements

You can avoid mouse wheel event conflicts by simply adding the class name "docSlider-scroll" to the scrolling element.

<div class="docSlider-scroll">
  ....
  ....
  ....
</div>

Automatically added class names

When you initialize docSlider.js, some class names that represent the current page are automatically added to the <html> tag.

Class name Description
.docSlider-index_0 Index number of the current page. In this case it is 0.
.docSlider-page_1 Page number of the current page. In this case it is 1.(equal Index number + 1)
.docSlider-id_foo Id attribute of the current page. In this case it is "foo". (only if you set the Id.)

Callback functions

function Params Description
complete options, elements Triggered after the docSlider.js has been initialized.
beforeChange index, page, toIndex, toPage, type Triggered before the page changes.
afterChange index, page, fromIndex, fromPage, type Triggered after the page changes.

Params

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"

Examples

docSlider.init({
    beforeChange : function(index){
        console.log('current index is ' + index);
    }
});

CSS Setting functions

If you want to change the initial placement of the page or the CSS settings for page changes, please use it.

function Params Description
setInitCss index, horizontal Invoked to initialize each page.
Function to set the initial position CSS of the page.
setChangeCss index, currentIndex, speed, easing, horizontal Invoked to change each page.
Function to set the 'transition' of each page.

Params

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

setInitCss

By default settings, the "top" or "left" property is used to place each page.

 function(index, horizontal){

    const point = horizontal ? 'left' : 'top';
    const style = {};

    style[point] = index * 100 + '%';

    return style;

}

setChangeCss

By default settings, the "transition" property is used to make moves on each page.

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;

}

Customize pager buttons

Change pager buttons style

If you want to change the style of the pager buttons, change the following lines of docSlider.css or docSlider.scss
The active button will be set to the class name ".selected".

docSlider.css

/* CHANGE THE PAGER STYLE */
.docSlider-pager {
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* CHANGE THE BUTTON STYLE */
.docSlider-button {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  margin: 5px 0;
  background-color: #333;
  opacity: .25;
  appearance: none;
  border: none;
  box-sizing: border-box;
}

.docSlider-button.selected {
  opacity: 1;
}

.docSlider-button:active {
  outline: none;
}

docSlider.css

/* CHANGE THE PAGER STYLE */
.docSlider-pager{
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* CHANGE THE BUTTON STYLE */
.docSlider-button{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  margin: 5px 0;
  background-color: #333;
  opacity: .25;
  appearance: none;
  border: none;
  box-sizing: border-box;

  &.selected{
    opacity: 1;
  }

  &:active{
    outline: none;
  }

}

Change pager buttons mark-up

If you want to change the markup on the pager buttons, add the ".docSlider-pager" tag as shown below.
Don't forget to add the class name "docSlider-button" to the child elements.
...then, rewrite the CSS/SCSS file as needed. 

<div class="docSlider">

    <div class="docSlider-pager">
        <div class="docSlider-button">page1</div>
        <div class="docSlider-button">page2</div>
        <div class="docSlider-button">page3</div>
    </div>

    <section>...</section>
    <section>...</section>
    <section>...</section>

</div>

Combine with scrollCue.js

docSlider.js can be used in combination with scrollCue.js.
More information about scrollCue.js. can be found here.

Usage

1. Add the scrollCue.js CSS and JavaScript files.

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

2. Initialize scrollCue.js before docSlider.js initialize.

Don't forget to set the options on the scrollCue.js side, at that time.

<script>
    scrollCue.init({docSlider:true});
    docSlider.init();
</script>

Examples

This is an example of using pageChangeReset and scrollReset.

<script>
    scrollCue.init({docSlider:true,pageChangeReset:true});
    docSlider.init({scrollReset:true});
</script>