AUI Carousel using WebContent with Repeatable Fields in Liferay

AUI Carousel using WebContent Structure/Template

AUI Carousel using WebContent Structure/Template with Repeatable Fields

Step 1 : Create a structure click Lunch editor its open a popup window paste this

<?xml version="1.0"?>

<root>
	<dynamic-element name="image" type="document_library" index-type="" repeatable="true"/>
</root>
 

Step 2 : Create a Template click Lunch editor its open a popup window paste this


<div id="carousel_1">
#foreach($img in $image.getSiblings())
<div class="imagediv" style="background: url($img.getData());"></div>    
#end
</div>
<script type="text/javascript" charset="utf-8"> AUI().ready('aui-carousel', function(A) {
var component = new A.Carousel(
{ intervalTime: 5, contentBox: '#carousel_1', activeIndex: 'rand', height: 214}
)
.render();
});
</script>

.imagediv {
	width: 100%;
	height: 214px;
	display: inline;
} 

Step 1 : Use this structure and template in web content portlet., You will find the add button if you click the button the filed will repeat one. you could delete this filed as click delete button to delete the filed.