Sections

Carousels

Our carousel plugins allows you to guide visitors through tasks by separating content into well-defined steps.

By default visitors move back and forth between steps using Previous and Next buttons but you can customize the template to have it look and behave however you like.

  • <ul data-element="carousel">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>

Installation

The Carousel plugin is included with every purchase of our Complete Package or can be purchased separately with individual theme purchases. Once you have received the plugin JavaScript file (carousel.js) you can install it in your theme in one of two ways:

  1. Copy and paste the JavaScript from the plugin file into your theme’s plugins.js file; or
  2. Add the carousel.js plugin to your theme’s Assets directory and add a reference to it in the document_head.hbs template:

     <script type="text/javascript" src="{{asset 'carousel.js'}}"></script>
    

Usage

When creating or updating an article:

  1. Create a ordered or unordered list (<ol> and <ul> elements, respectively)
  2. Click the Source Code (Source code icon) button in the editor toolbar to view the source code of the page.
  3. Add the data-element="carousel" attribute to the list element.
<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 the Zendesk Guide settings.

The Carousel plugin can be instantiated against a list or other HTML element 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- and use kebab case instead of camel case.

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.