Creating carousels

In this guide we’ll focus on how to create interactive carousels within the content of your article using the editor within Zendesk Guide.

Because the extension is built-in to all of our themes, there are no additional scripts to include or code to write.

Adding carousels to article content

The first step is to create a numbered or bulleted list in your article where each list item contains the content that will be contained within its own carousel slide. If you have a lot of content to display in each slide, or content that contains headings and other custom elements, we recommend using the Source Code view within the article editor.

The list itself will be a <ol> or <ul> element, with child list items represented as <li> elements.

Once you’ve added all of your content to the list add a class name of .js-carousel to the list to convert it into an interactive carousel. For example:

<ul class="js-carousel">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Where:

• The .js-carousel class name specifies that we’d like to convert this list into an interactive carousel.
• The content of each list item is converted into its own carousel slide.

The default carousel style can be found on the Carousel extension page.

This approach ensures a separation between your content and how it’s displayed to visitors. If you ever decide to disable tabs for a given list, change themes or export your content you’ll see a simple, uncontaminated list.

Using a custom micro-template

Or for the more adventurous among you, you can create your own custom micro-template.

A custom template allows you to change not just the appearance of the carousels, but their underlying HTML structure and behavior.