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.
