Usage
<div id="carousel" ui-type="Carousel" style="height: 250px;" ui-horizontal="false" ui-rotate-interval="0">
<div ui-template="1" ui-cloneable="false">
<div style="box-sizing: border-box; height: 100%; padding: 10px; background: rgba(0,0,0, 0.1);">
<h2>Panel one</h2>
<p>A short panel with a single line of text.</p>
</div>
</div>
<div ui-template="2" ui-cloneable="false">
<div style="box-sizing: border-box; height: 100%; padding: 10px; background: rgba(0,0,0, 0.5); color: #fff;">
<h2>Panel two</h2>
<p>
Panels can hold any content, paragraphs, lists, images or other components. The
carousel only manages positioning and transitions, not what's inside each item.
</p>
</div>
</div>
<div ui-template="3" ui-cloneable="false">
<div style="box-sizing: border-box; height: 100%; padding: 10px; background: rgba(0,0,0, 0.1);">
<h2>Panel three</h2>
<p>Try the arrows, arrow keys, mouse wheel or a swipe gesture to move between panels.</p>
</div>
</div>
</div>
const carousel = $UI.createComponent(componyx.UI.Carousel, {
id: 'carousel',
style: 'height: 250px;',
horizontal: false,
rotateInterval: 0,
containerElement: document.body
});
carousel.addTemplate('1', '<div style="box-sizing: border-box; height: 100%; padding: 10px; background: rgba(0,0,0, 0.1);"><h2>Panel one</h2><p>A short panel with a single line of text.</p></div>');
carousel.addTemplate('2', '<div style="box-sizing: border-box; height: 100%; padding: 10px; background: rgba(0,0,0, 0.5); color: #fff;"><h2>Panel two</h2><p>Panels can hold any content, paragraphs, lists, images or other components. The carousel only manages positioning and transitions, not what\'s inside each item.</p></div>');
carousel.addTemplate('3', '<div style="box-sizing: border-box; height: 100%; padding: 10px; background: rgba(0,0,0, 0.1);"><h2>Panel three</h2><p>Try the arrows, arrow keys, mouse wheel or a swipe gesture to move between panels.</p></div>');
carousel.show();