AUI Carousel using WebContent Structure/Template

Community Blogs April 21, 2013 By Tejas Kanani

Hi All,

If you have checked Liferay Home Page (I'm sure you've seen it many times smiley), There is a nice Image Carousel placed on very first raw on it.

I saw many post in which people were asking on how to create the same Carousel.

AUI Carousel on Liferay Home page

Answer

We can develop the same using AUI Carousel. There is a nice tutorial on AlloyUI Carousel which describes in detail about it in very simple term.

 

Lets make it even easier

Just to make it more simple to use, we can create a Web Content Structure & Template which will allow you to create same carousel just by providing images to be displayed. & some basic carousel parameters mentioned below

 

Structure

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

  • activeIndex - 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. Min limit advisable is 40
  • maxImageWidth - Provide max width of image element. Min limit advisable is 130
  • ImageElementSet
    • image - Browse & upload image to be displayed
    • linkUrl - Url of image if you want to make it clickable

Template

Create a Structure & Template from above AUI_Carousel_Structure.xml & Template AUI_Carousel_Template.vm gists respectively. 

 

For Liferay 6.2

Structure

 

Template

 

 

That's it guys now just create web content using created Structure & Template along with all required element values & Images to be displayed. And your nice looking Image Carousel using AUI Carousel is ready.

 

Carousel prepared using Web content

I hope this will be helpful. Feel free to provide any feedback/issue via comment.

 

Thanks,

Tejas Kanani

Showing 1 result.