mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-01 01:01:47 +02:00
Code Issues Releases Wiki Activity

Updated Core API (markdown)

Antonio Laguna
2017-04-19 17:33:26 +02:00
parent eed58bcceb
commit e5fe5f0e66
1 changed files with 5 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
Core-API.md

@@ -15,7 +15,7 @@ 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 `<section>` elements inside of it. If in doubt, check [any of our demos](https://webslides.tv/demos/) for inspiration and guidance.
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 `<section>` elements inside of it. If in doubt, check [any of our demos](https://webslides.tv/demos/) for inspiration and guidance.
### Options
@@ -46,26 +46,16 @@ const ws = new WebSlides({
Do you want to get your hands dirty? This is the API for the WebSlides module:
<dl>
<dt><a href="#goToSlide">goToSlide(slideIndex, opt_forward)</a></dt>
<dt><a href="#goToSlide">goToSlide(slideIndex, forward)</a></dt>
<dd><p>Goes to a given slide.</p></dd>
<dt><a href="#goNext">goNext()</a></dt>
<dd><p>Goes to the next slide.</p></dd>
<dt><a href="#goPrev">goPrev()</a></dt>
<dd><p>Goes to the previous slide.</p>
<dt><a href="#play">play()</a></dt>
<dd><p>Starts autosliding.</p>
<dt><a href="#stop">stop()</a></dt>
<dd><p>Stops autosliding.</p>
<dd><p>Goes to the previous slide.</p>
</dd>
<dt><a href="#registerPlugin">registerPlugin(key, cto)</a></dt>
<dd><p>Registers a plugin to be loaded when the instance is created. It allows
(on purpose) to replace default plugins.
Those being:</p>
<ul>
<li>Navigation</li>
<li>Hash</li>
<li>Keyboard</li>
</ul>
(on purpose) to replace default plugins.</p>
</dd>
</dl>
@@ -89,20 +79,6 @@ 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
<a name="play"></a>
### `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 | <code>number</code> | Amount of milliseconds to wait to go to next slide automatically. |
<a name="stop"></a>
### `stop()`
Stops autosliding.
<a name="registerPlugin"></a>
### `registerPlugin(key, cto)`
@@ -125,20 +101,4 @@ Those being:
| Param | Type | Description |
| --- | --- | --- |
| key | <code>string</code> | They key under which it'll be stored inside of the instance, inside the plugins dict. |
| cto | <code>function</code> | 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:
```javascript
// 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](../src/js/modules/webslides.js#L11) to see all the plugins we're using and the name they're using.
| cto | <code>function</code> | Plugin constructor. |