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

In this article


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">
  • <ul data-element="carousel">

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


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 The name of the template to use.
templateData object {} Additional data to provide to the template rendering function.


Class Properties
carousel.initialize Fires when the plugin is initialized.
carousel.render Fires when the carousel has been rendered. Fires when the next page is shown.
carousel.previous Fires when the previous page is shown.