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.
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.

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

API

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

goToSlide(slideIndex, opt_forward)

Goes to a given slide.

goNext()

Goes to the next slide.

goPrev()

Goes to the previous slide.

play()

Starts autosliding.

stop()

Stops autosliding.

registerPlugin(key, cto)

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

• Navigation
• Hash
• Keyboard

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

play(time)

Autoplays slides. If time is omitted, it will use the default time passed to the constructor. This is useful if you don't want to autoslide from the beginning but you want to add a button to do it.

| Param | Type | Description | | --- | --- | --- | --- | | time | number | Amount of milliseconds to wait to go to next slide automatically. |

stop()

Stops autosliding.

registerPlugin(key, cto)

Registers 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.

Plugin development

Almost every single feature of WebSlides is a plugin that can be overwritten and you are able to create your custom plugins. Just call registerPlugin (as seen above) before creating the instance:

// Adding the constructor to WebSlides
WebSlides.registerPlugin('myPlugin', MyPlugin);

// Starting WebSlides
// Your plugin will be constructed at this time and it will receive the webslides instance as the only parameter.
const ws = new WebSlides();
// You can also access ws.plugins.myPlugin now

This allows you to rewrite the navigation to use a menu (for example) or add that missing piece of functionality you'd like to see. See this part of the code to see all the plugins we're using and the name they're using.