scroll-slide v2.1.0

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