Plugin docs

Autoslide

This plugin is included by default but disabled. In order to enable it, the option autoslide must be passed as a number which is the number of milliseconds that should take to slide to the next slide.

You may want to control the autoslide manually.

const ws = new WebSlides({ autoslide: 5000 }); // Slide every 5 seconds
ws.plugins.autoslide.stop(); // Stop autosliding
ws.plugins.autoslide.play(); // Resume autosliding
ws.plugins.autoslide.stop();
ws.plugins.autoslide.play(2000); // Resume but now every 2 seconds

Click To Nav

This plugin is included by default but disabled. In order to enable it, the option changeOnClick must be passed as true.

const ws = new WebSlides({ changeOnClick: true });

This will make every click to navigate to the next slide except for clicks that happens on the following elements:

• input.
• select or option.
• button.
• a.
• Any element with the attribute data-prevent-nav.

Keyboard

Key Navigation

There's a handful of keys that can be used to achieve navigation within WebSlides. Here's the list:

• ←: If WebSlides is not vertical, it will go to the previous slide.
• →: If WebSlides is not vertical, it will go to the next slide.
• ↑: If WebSlides is vertical, it will go to the previous slide.
• ↓: If WebSlides is vertical, it will go to the next slide.
• Page Up: Go to the previous slide.
• Page Down: Go to the next slide.
• Space: Go to the next slide.
• Shift + Space: Go to the previous slide.
• Home: Go to the first slide.
• End: Go to the last slide.
• -: Enter slide index.
• + or Esc: Exit slide index.
• f: Toggle fullscreen mode.

Slide Index (Zoom)

The slide index is accesible by either pressing the - (dash) key or clicking on the slides count that's on the bottom of the page. It's accessible on mobile by pinching the screen.

You can exit it manually by either pressing + or the Esc key and it also closes whenever you choose one of the slides to navigate to.

If you'd rather like to disable this feature entirely, you can do so with the following option:

const ws = new WebSlides({ showIndex: false });

Video

Any videos that have the autoplay attribute will get it removed and it will autoplay whenever you enter into the Slide.

Example:

<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
  <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video>

The video will play when you enter on that Slide and it will automatically pause whenever you exit from the slide.

Note: Autoplaying won't work on mobile devices as this is enforced by the devices to avoid wasting data.

YouTube

YouTube unfortunately can't be handled as normal videos since we need the API to make them work, so we added a special syntax so you can control YouTube videos automatically with WebSlides.

<div data-youtube 
     data-youtube-id="SomZsr1J7ao"
     data-autoplay
     data-loop
     data-mute
     data-no-controls>
</div>

Those are all the options that you can pass although you can pass them all or even none (and achieve the same as adding the embed).

In this example, we're saying that we want the video with id SomZsr1J7ao to autoplay when the Slide gets active, to loop forever, to be muted and to have no-controls.

Note: Autoplaying won't work on mobile devices as this is enforced by the devices to avoid wasting data. Also, you'll need to serve the slides from a local server (lots of options out there) or upload it to your server since serving from a file does not work for YouTube.