-
Notifications
You must be signed in to change notification settings - Fork 586
Plugin docs
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
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
oroption
. -
button
. -
a
. - Any element with the attribute
data-prevent-nav
.
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. -
+
orEsc
: Exit slide index. -
f
: Toggle fullscreen mode.
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 });
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 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.
Create stories with karma — webslides.tv