Usage
Via data attributes
When editing an existing article, create a list (<ul>
or <ol>
element) and click the Source Code ( < > ) button on the editor toolbar to view the source code of the page. Add the data-element="carousel"
attribute to the list.
<ul data-element="carousel">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
-
-
<ul data-element="carousel"> <li>...</li> <li>...</li> <li>...</li> </ul>
If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
Via JavaScript
The Carousel plugin can be instantiated against a list using JavaScript:
<ul id="carousel">...</ul>
<script type="text/javascript">
ready(function() {
var carousel = document.getElementById('carousel');
if (carousel) {
new Carousel(carousel, {
// Options go here
});
}
});
</script>
Options
Options can be passed via data attributes or JavaScript.
For data attributes, append the option name to data-
.
Name | Type | Default | Description |
---|---|---|---|
initial | number | 0 | The index of the page to show on initialization. |
children | string | ul > li | The CSS selector for identifying child elements (pages). |
previousButton | string | .js-previous | The CSS selector for identifying the Previous button. |
nextButton | string | .js-next | The CSS selector for identifying the Next button. |
scrollToTop | boolean | false | True if the page should scroll to the top of the current page after the Next or Previous buttons are clicked. |
template | string null | null | The name of the template to use. |
templateData | object | {} | Additional data to provide to the template rendering function. |
Events
Class | Properties |
---|---|
carousel.initialize | Fires when the plugin is initialized. |
carousel.render | Fires when the carousel has been rendered. |
carousel.next | Fires when the next page is shown. |
carousel.previous | Fires when the previous page is shown. |