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.
• Home: Go to the first slide.
• End: Go to the last slide.

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.

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. We're saying there, we want the video with id SomZsr1J7ao to autoplay when the Slide gets active, to loop forever, to be _mute_d and to have no-controls.