You can use webcontent :
structure :
<root>
<dynamic-element name="duration" type="list" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">false</entry>
<entry name="instructions">Select how long, in seconds, you would prefer to display an item before switching to the next slide</entry>
<entry name="label">Item Duration</entry>
<entry name="predefinedValue"></entry>
</meta-data>
<dynamic-element name="1" type="1" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="2" type="2" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="3" type="3" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="4" type="4" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="5" type="5" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="6" type="6" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="7" type="7" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="8" type="8" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="9" type="9" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="10" type="10" index-type="" repeatable="false"></dynamic-element>
</dynamic-element>
<dynamic-element name="height" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">true</entry>
<entry name="instructions">This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value</entry>
<entry name="label">Height</entry>
<entry name="predefinedValue"></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="width" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">true</entry>
<entry name="instructions">This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value</entry>
<entry name="label">Width</entry>
<entry name="predefinedValue"></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="content" type="text_area" index-type="text" repeatable="true">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">true</entry>
<entry name="instructions">This is the content of this slide. To create more slides, click on the " " button</entry>
<entry name="label">content</entry>
<entry name="predefinedValue"></entry>
</meta-data>
</dynamic-element>
</root>
Template
#set ($contentId = $reserved-article-id.getData())
#set ($contentClass = "multiple-items-" + $contentId + "-carousel")
<style type="text/css" media="screen">
#$contentClass {
height: $height.getData()px;
position: relative;
width: $width.getData()px;
}
#$contentClass .carousel-item {
height: $height.getData()px;
overflow: hidden;
width: $width.getData()px;
position: absolute;
top: 0;
}
</style>
<div id="$contentClass">
#foreach ($item in $content.getSiblings())
<div class="carousel-item">
$item.getData()
</div>
#end
</div>
<script type="text/javascript">
AUI().ready(
'aui-carousel',
function(A) {
var component = new A.Carousel(
{
activeIndex: 'rand',
contentBox: '#$contentClass',
height: $height.getData(),
intervalTime: $duration.getData(),
width: $width.getData()
}
)
.render();
});
</script>
