scroll-slide

Flexible and pure-js scrollable slides maker.

demo

Features

• No other requirements like jquery.
• Can make onepage-scroll and also section-scroll.
• Add or remove slides programatically.
• Both scrolling and swiping are supported.
• Keyboard supported.
• Optional paginator.

Usage

Install the library via npm:

npm install scroll-slide

Usage in HTML:

<script src="/path/to/scroll-slide.min.js"></script>

Or using es6:

import Scroll from 'scroll-slide'

Basic examples

const scroll = new Scroll({
  viewport: document.getElementById('viewport'),
  slides: document.querySelectorAll('#viewport section'),
  paginator: 'right',
  onScroll (i) {
    alert(`This is slide ${i + 1}`)
  }
})

Full mode

You can create slide which fills the entire viewport regardless of its original size by setting attribute data-full to 'true'.

<div id="viewport">
  <section id="full" data-full="true">
    This slide will fill the entire viewport.
  </section>
  <section id="nofull">
    This slide will keep its original size.
  </section>
</div>

API

Methods

constructor(option)

More for option, see below.

add(el, index)

Adds new element to viewport at position index. Push to the end by default.

current()

Returns the index of current slide. Starts from 0.

remove(index)

Removes the element at position index in the viewport.

scrollDown()

Moves the slide down by one. The same as scrolling down/swiping down.

scrollTo(index = 0)

Moves to the slide at position index. Moves to the first slide by default.

scrollUp()

Moves the slide up by one. The same as scrolling up/swiping up.

toggleFull(el)

Toggles full mode of an element.

Options

| Property | Description | Type | Default | | --- | --- | --- | --- | | autoHeight | If true, the height of slides will be responsive to the height of window. | Boolean | true | | dotColor | The color for paginator dots. | String | '#e1e1e1' | | dotActiveColor | The color for paginator dot which is currently actived. | String | '#6687ff' | | duration | How long the scolling animation will last in milliseconds. | Number | 1000 | | idleTime | How long the browser won't respond to the scrolling action after last scrolling in millseconds. | Number | 200 | | loop | If the continuous loop mode to be enabled. | Boolean | true | | keyboard | If true, you can use up/down and pageUp/pageDown to navigate slides. | Boolean | true | | paginator | If 'none', there will be no paginator. If 'right'/'left', the paginator will be shown on the right/left of the viewport. | String | 'none' | | slides | The elements to be shown as slides in the viewport. | Array | [] | | viewport | The wrapper element for all slides. If you need to create a onepage-scroll website, just set viewport to fit the screen size. | Element | null | | onScroll | The callback function when reaches a new slide. The index of current slide will be passed. | Function | null |