Creating carousels within your article content doesn’t involve copying and pasting any HTML as the Carousels extension lets you transform standard ordered (
<ol>) and unordered (
<ul>) lists created in the article editor into an interactive carousel element. This makes it easy for visitors to find what they’re looking and allows content creators to focus on producing helpful content.
If you do ever need to migrate your content you can do so without having to worry about unnecessary markup or inline styles.
The default template is simple, elegant and responsive and will automatically inherit the overall style of your theme. You can add any type of content you like to each carousel slide, including HTML, images, videos and other article formatting styles.
Customized carousel templates can introduce icons, transition effects and even entirely new layouts.
Creating a carousel
Carousels can be used anywhere in the help center, but often they are used within article content. Our extension allows you to create toggles in several different ways, none of which require you to copy-and-paste any HTML.
The Carousels extension is bundled into all of our themes by default, so you can start using it straight away. The source code can be found within the
extensions.(min.)js file in the theme’s Assets folder.
|initial|| || ||The index of the page to show on initialization.|
|children|| || ||The CSS selector for identifying child elements (pages).|
|previousButton|| || ||The CSS selector for identifying the Previous button.|
|previousTitle|| || ||The label to display in the Previous button.|
|nextButton|| || ||The CSS selector for identifying the Next button.|
|nextTitle|| || ||The label to display in the Next button.|
|scrollToTop|| || ||True if the page should scroll to the top of the current slide after the Next or Previous buttons are clicked.|
|template|| || ||The name of the micro-template to use.|
|templateData|| || ||Additional data to provide to the template rendering function.|
| ||Fires when the extension is initialized.|
| ||Fires when the carousel has been rendered.|
| ||Fires when the next page is shown.|
| ||Fires when the previous page is shown.|