Carousels

Carousels are a convenient and effective way to present steps, tutorials and other guided content to your visitors.

The default carousel template
View code
<template id="tmpl-carousel">
  <% if (children.length) { %>
    <div class="p-6 mb-4 border border-radius bg-white">
      <ul class="list-unstyled">
        <% children.forEach(function(child, index) { %>
          <li>
            <%= child.innerHTML %>
          </li>
        <% }); %>
      </ul>
      <div class="mt-6">
        <button class="button button-link js-previous">
          <% if (previousTitle) { %>
            <%= previousTitle %>
          <% } %>
        </button>
        <button class="button button-primary js-next">
          <% if (nextTitle) { %>
            <%= nextTitle %>
          <% } %>
        </button>
      </div>
    </div>
  <% } %>
</template>
Customized carousel
View code
<template id="tmpl-carousel">
  <% if (children.length) { %>
    <div class="md:m-5" x-data="{ active: 1 }" x-on:carousel:next="active++" x-on:carousel:previous="active--">
      <div class="p-6 mb-4 border border-radius bg-white border-top border-top-4 border-top-primary shadow-lg">
        <ul class="list-unstyled">
          <% children.forEach(function(child, index) { %>
            <li>
              <%= child.innerHTML %>
            </li>
          <% }); %>
        </ul>
      </div>
      <div class="flex align-items-center justify-content-center my-5">
        <button class="button button-primary circle flex justify-content-center p-2 js-previous" title="Previous">
          <svg class="fill-current align-self-center" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 100 100">
            <polygon points="40.6,88.1 50.2,78.4 28.6,56.8 97.5,56.8 97.5,43.2 28.6,43.2 50.2,21.6 40.6,11.9 2.5,50"/>
          </svg>
        </button>
        <span class="text-gray-700 mx-4 font-semibold"><span class="step-number" x-text="active"></span> of <%= children.length %></span>
        <button class="button button-primary circle flex justify-content-center p-2 js-next" title="Next">
          <svg class="fill-current align-self-center" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 100 100">
            <polygon points="59.4,11.9 49.8,21.6 71.4,43.2 2.5,43.2 2.5,56.8 71.4,56.8 49.8,78.4 59.4,88.1 97.5,50"/>
          </svg>
        </button>
      </div>
    </div>
  <% } %>
</template>

Carousel patterns are custom micro-templates that you can use with our Carousels extension. To have them applied when you create carousels within your article content, simply copy-and-paste the code into the bottom of your Article page template (article_page.hbs).

To learn how to actually create carousels within your article content, refer to the Carousels extension page.

Related patterns