Sections

Core concepts

Setup

Base styles

Plugins

Carousels

Publish step-by-step content sections to help guide visitors.

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>
Carousel with standard template 
  • <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.