AUI Carousel using WebContent (Structure/Template)

To Create carousel like above image or as shown on Liferay home page

Follow under Given Steps

• Create Structure using under given structure.xml code
• Create Template using under given template.vm code
• After creating structure and template now just add appropriate parameters and images.
• And your carousel is ready for you.

There is a nice tutorial on AlloyUI Carousel which describes in detail about it in very simple term.

structure.xml

1234567891011121314151617181920212223242526272829303132333435363738394041424344

<?xml version="1.0"?> <root> <dynamic-element name="imageIndex" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Index of the first visible item of the carousel]]></entry> <entry name="label"><![CDATA[Image Index]]></entry> <entry name="predefinedValue"><![CDATA[0]]></entry> </meta-data> </dynamic-element> <dynamic-element name="timeInterval" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Interval time in seconds between an item transition.]]></entry> <entry name="label"><![CDATA[Time Interval]]></entry> <entry name="predefinedValue"><![CDATA[0.75]]></entry> </meta-data> </dynamic-element> <dynamic-element name="maxImageHeight" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Provide max height of image element. ex-200]]></entry> <entry name="label"><![CDATA[Max Image Height]]></entry> <entry name="predefinedValue"><![CDATA[250]]></entry> </meta-data> </dynamic-element> <dynamic-element name="maxImageWidth" type="text" index-type="" repeatable="false"> <meta-data> <entry name="displayAsTooltip"><![CDATA[true]]></entry> <entry name="required"><![CDATA[false]]></entry> <entry name="instructions"><![CDATA[Provide max width of image element. ex-150]]></entry> <entry name="label"><![CDATA[Max Image Width]]></entry> <entry name="predefinedValue"><![CDATA[600]]></entry> </meta-data> </dynamic-element> <dynamic-element name="ImageElementSet" type="selection_break" index-type="keyword" repeatable="true"> <dynamic-element name="image" type="image" index-type="keyword" repeatable="false" /> <dynamic-element name="linkUrl" type="text" index-type="keyword" repeatable="false"/> </dynamic-element> </root>

Below are the details of some basic parameters that we've defined in structure.xml

• imageIndex - Index of the first visible item of the carousel
• timeInterval - Interval time in seconds between an item transition
• maxImageHeight - Provide max height of image element. ex-200
• maxImageWidth - Provide max width of image element. ex-150
• ImageElementSet
  • image - Browse & upload image to be displayed
  • linkUrl - Url of image if you want to make it clickable
   
  

template.vm

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $imageIndex.Data) <style type="text/css"> .aui-carousel { -moz-user-select: none; margin: 20px 0; } .aui-carousel-item { border-radius: 10px 10px 10px 10px; text-indent: -9999em; } .aui-carousel li { margin: 0 !important; } </style> #set($totalCount = 0) <div id="carousal"> #foreach($imageElement in $ImageElementSet.getSiblings()) #if($imageElement.image.getData() != "") #if($imageElement.linkUrl.getData() != "") <a href="$imageElement.linkUrl.Data"> <img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" /> </a> #else <img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" /> #end #set($totalCount = $totalCount + 1) #end #end </div> #if($totalCount > 0) <script> AUI().ready('aui-carousel', function(A) { var carousel = new A.Carousel( { contentBox: '#carousal', activeIndex: $activeIndexValue, intervalTime: $interval, width: $imageWidth, height: $imageHeight }).render(); }); </script> #end