Core API

Project Setup

This project assumes you have NodeJS. You should also have npm installed as well (npm usually comes packaged with Node). Once you have it cloned, you should run npm install to get all the dependencies.

Finally, run one of the following commands in the cloned directory:

• npm run dev: This starts a dev server with autoreload on the port 8080.
• npm run build: This creates the dist files.

JavaScript

In order to bootstrap the WebSlides you'll need to create a instance of it:

const ws = new WebSlides();

That'll make everything run without any hassle. Note that we're using a convention over configuration here, for WebSlides to actually work you need a container with an id of webslides' and

` elements inside of it. If in doubt, check any of our demos for inspiration and guidance.

Options

WebSlides constructor accepts an object with options.

Param	Type	Default	Description
autoslide	number or boolean	false	Amount of milliseconds to wait to go to next slide automatically.
changeOnClick	boolean	false	If true, clicking on the page will go to the next slide unless it's a clickable element. See ClickToNav docs for more info.
loop	boolean	true	Lets WebSlides loop the slides so once it reaches the end, going next will make it go to the first slide.
minWheelDelta	number	40	Controls the amount of scroll needed to trigger a navigation. Lower this number to decrease the scroll resistance.
navigateOnScroll	number	40	Whether scroll can trigger navigation or not.
scrollWait	number	450	Controls the amount of time needed to wait for a scroll transition to happen again.
slideOffset	number	50	Amount of sliding needed to trigger a new navigation.
showIndex	boolean	true	Controls if the index can be shown.

const ws = new WebSlides({
  autoslide: false,
  changeOnClick: false,
  loop: true,
  minWheelDelta: 40,
  navigateOnScroll: true,
  scrollWait: 450,
  slideOffset: 50,
  showIndex: true
});

API

Do you want to get your hands dirty? This is the API for the WebSlides module:

goToSlide(slideIndex, forward)

Goes to a given slide.

goNext()

Goes to the next slide.

goPrev()

Goes to the previous slide.

registerPlugin(key, cto)

Registers a plugin to be loaded when the instance is created. It allows (on purpose) to replace default plugins.

goToSlide(slideI, forward)

Goes to a given slide.

Param	Type	Description
slideIndex	number	The slide index.
forward	boolean	Whether we're forcing moving forward/backwards. This parameter is used only from the goNext, goPrev functions to adjust the scroll animations.

goNext()

Goes to the next slide. If the page is vertical, it will animate the scroll down.

goPrev()

Goes to the previous slide. If the page is vertical, it will animate the scroll up

registerPlugin(key, cto)

Register a plugin to be loaded when the instance is created. It allows (on purpose) to replace default plugins.

Those being:

• autoslide
• clickNav
• grid
• hash
• keyboard
• nav
• scroll
• touch
• video
• youtube

Param	Type	Description
key	string	They key under which it'll be stored inside of the instance, inside the plugins dict.
cto	function	Plugin constructor.

You can read more about plugin development.

Public properties

These properties are inside of the WebSlides instance and they could be useful to achieve new behaviors.

• el: The DOM node to which WebSlides is attached.
• isMoving: A Boolean indicating whether a transition is happening.
• slides: An array of Slide instances. A new Slide instance is created for every section inside of el.
• isVertical: A Boolean indicating whether WebSlides is in vertical mode.
• plugins: Plugins dict which allows you to manually control some of them.
• options: An object with all the options given to the constructor (as seen above).
• initialised: A Boolean indicating whether WebSlides has finished the initialisation or not.

Events

WebSlides fires events on the WebSlide's element.

ws:init

Called once WebSlides has been initialised and the initialised flag is set to true. This happens after all plugins have been created and all Slides have been parsed (in that order).

This will happen synchronously at the same time the instance is created so make sure you place your event listener before the constructor is instantiated.

ws:slide-change

Called once the slide has finished transitioning into view. The event.detail contains the following information:

{
  slides: Number, // Number of slides on WebSlides (this wont change)
  currentSlide0: Number, // Current slide index (0 based)
  currentSlide: Number // Current slide index
}

Slide class

Unless doing plugin development there should be no need to deal with Slides.

API

hide()

Hides the node and removes the class that makes it "active".

show()

Shows the node and adds the class that makes it "active".

moveAfterLast()

Moves the section to the bottom of the section's list.

moveBeforeFirst()

Moves the section to the top of the section's list.

enable()

Fires an enable event.

disable()

Fires a disable event.

Slide.isCandidate(el)

Checks whether an element is a valid candidate to be a slide by ensuring it's a "section" element.

Slide.getSectionFromEl(el)

Gets the section element from an inner element.

slide.hide()

Hides the node and removes the class that makes it "active".

slide.show()

Shows the node and adds the class that makes it "active".

slide.moveAfterLast()

Moves the section to the bottom of the section's list.

Emits: dom:leave, dom:enter

slide.moveBeforeFirst()

Moves the section to the top of the section's list.

Emits: dom:leave, dom:enter

slide.enable()

Fires an enable event.

Emits: slide:enable

slide.disable()

Fires a disable event.

Emits: slide:disable

Slide.isCandidate(el) ⇒ boolean

Checks whether an element is a valid candidate to be a slide by ensuring it's a "section" element.

Returns: boolean - Whether is candidate or not.

Param	Type	Description
el	Element	Element to be checked.

Slide.getSectionFromEl(el) ⇒ Object

Gets the section element from an inner element.

Returns: Object - A map with the section and the position of the section.

{
  section: Element, // Section DOM node
  i: Number // Section position on the list
}

Properties

• el: The DOM node to which the Slide represents.
• parent: The section's parent Node. Usually the WebSlides container.
• i: Position of the slide.

Events

Slides fire events on the slide's element. All of the events have a slide property on the detail which contains the instance.

slide.addEventListener('slide:enable', event => {
  // event.detail.slide contains the instance with all the methods and properties listed
});

dom:enter

Fired whenever the Slide enters the DOM again. This is useful to restore any elements that were affected by DOM Leave (below).

dom:leave

Fired whenever the Slide leaves the DOM. This is useful to deal with elements that may need special treatment if the Slide leaves the DOM. For example, iframe elements are reloaded whenever this happen.

slide:disable

Fired when the slide gets inactive (navigated away).

slide:enable

Fired when the slide gets active (navigated into).