AUI Carousel using WebContent Structure/Template

Hi All,

If you have checked Liferay Home Page (I'm sure you've seen it many times ), 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.

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.

• AUI Carousel Tutorial

 

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.

 

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

 

Thanks,

Tejas Kanani

[Jack Bakker]

Interesting ... I still prefer jquery rotators and continue to include jquery in tomcat*/ROOT/html/js/jquery and then reference in theme; other aui tools are certainly VERY attractive ; great that Liferay can support each and more

[David H Nebinger]

The one thing to keep in mind, Jack, is that Liferay will load AUI anyway (otherwise the portal is not functional). Adding jQuery will result in a larger browser footprint on the client side.

Sure you get the effects you're looking for and it will work in your test environment, but end users may balk at the larger memory requirements of their browser w/o understanding why it is needed...

[Jack Bakker]

David, are you implying that all aui gets loaded with each page hit ? I love aui for many things (yes, love), but also might reference one or more versions of jquery in perhaps one or more themes, but then load jquery addons via Liveray Page level JavaScript 1, 2,3 etc.

[David H Nebinger]

AUI uses selective loading (only loads modules which are used on the page), so it doesn't load everything and the kitchen sink. But you do get the core AUI, just like when you load jQuery you get the jQuery core.

I wouldn't recommend using different versions of jQuery (as you are adding more client browser resource requirements), nor would I recommend loading jQuery on a portlet level (by specifying in liferay-portlet.xml, for example).

If you are planning to use jQuery in your portlets, I'd stick with a single version of jQuery loaded at the theme level.

[Jack Bakker]

loading multiple jquery versions is pretty straight forward ; also is load of addons requiring specific versions

[Bradley Wood]

Here is a sliding carousel that Robert and I made by using Alloy

http://codepen.io/randombrad/pen/cDjvB

[Luis Mas]

It would be great if you add to the sample some text content inside the image for demoing that something like this http://bqworks.com/products/advanced-slider/mixed.html can be done with AlloyUI carousel.

[chirag @ India]

Too good Using this i made web-content Carousel.In that we insert only id of web-content & then it display whole content instead of image check it

[chirag @ India]

You can check at http://liferay.medicalassociation.in/home

[guest Here]

Nice tutorial.
I'm trying to implement it, and it works fine. Except for the images hyperlinks:
- liferay assigns the site path + the provided linkUrl as the hyperlinnk. So if the image has a url (outside the portal), say, www.urlhere.com, liferay gives: www.siteurl.com/www.urlhere.com.

How can I go around this problem?
Thanks!

[Tejas Kanani]

Try giving complete url including http in url textbox.
So give http://www.urlhere.com instead of www.urlhere.com. It should resolve your problem.

[guest Here]

Thank you Tejas, thad did the trick!

[Riley Pickerl]

On the liferay homepage the carousel is responsive. Do you have the js to do this or is this something that is handled by AUI? Thanks

[Tejas Kanani]

Riley, Check this out it is something you are looking for.
http://codepen.io/randombrad/pen/cDjvB

[Kiran Yalavali]

Hi Tejas Kanani,

How to add title and description on carousel image slide show in web content .
Please help me.

[V D L]

hi tejas..
i followed your steps exactly..i created structure and tenplate with your code( no chane)..but it is showing only first image ...it is not sliding..sliding bar also not visible...and on left side of top it is displaying this.
ageWidth = 600)

[V D L]

sorry tejas... mistake was in copying code.. now it is working fine..thanks for this blog

[Tejas Kanani]

Glad to know that it helped you.

[siddhant jain]

its not working in LR 6.2

[Tejas Kanani]

Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2.

[Philip Teagle]

Hi Tejas,
I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

[Tejas Kanani]

Hi Philip,
As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css.

[Marco Moncalvo]

For Liferay 6.2 / Responsive Carousel

Structure:

<root available-locales="es_ES" default-locale="es_ES">
<dynamic-element dataType="string" indexType="" name="activeIndex" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="es_ES">
<entry name="label">
<![CDATA[activeIndex]]>
</entry>
<entry name="predefinedValue">
<![CDATA[0]]>
</entry>
<entry name="tip">
<![CDATA[Index of the first visible item of the carousel]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="string" indexType="" name="timeInterval" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="es_ES">
<entry name="label">
<![CDATA[timeInterval]]>
</entry>
<entry name="predefinedValue">
<![CDATA[0.75]]>
</entry>
<entry name="tip">
<![CDATA[Interval time in seconds between an item transition.]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="image" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width="">
<dynamic-element dataType="string" indexType="keyword" name="linkUrl" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="es_ES">
<entry name="label">
<![CDATA[linkUrl]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<meta-data locale="es_ES">
<entry name="label">
<![CDATA[image]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
</root>



Template:

#set($interval = $timeInterval.Data)
#set($activeIndexValue = $activeIndex.Data)

<style type="text/css">
.aui .carousel {
margin-bottom: 0;
}
.auiCarousel .aui-carousel-item {
height: auto;
position: relative;
display: none;
}
.auiCarousel .carousel-item img {
width: 100%;
height: auto;
}
.auiCarousel .carousel-item-active {
display: block;
}
</style>

#set($totalCount = 0)
<div class="auiCarousel">
#foreach($imageElement in $image.getSiblings())
<div class="aui-carousel-item">
#if($imageElement.getData() != "")
#if($imageElement.linkUrl.getData() != "")
<a href="$imageElement.linkUrl.Data">
<img src="$imageElement.Data" />
</a>
#else
<img src="$imageElement.Data" />
#end
#set($totalCount = $totalCount + 1)
#end
</div>
#end
</div>

#if($totalCount > 0)
<script>
// Defining Carousel Module"
YUI().use('aui-carousel', function(Y) {
new Y.Carousel({
contentBox: '.auiCarousel',
activeIndex: $activeIndexValue,
intervalTime: $interval,
}).render();
});
</script>
#end

[(You)]

[...] AUI Carousel using WebContent Structure/Template - Blog | Liferay [...] Read More

[Aaron Paxson]

Hmmm... very odd. The 6.2 code doesn't seem to work. The carousel loads, and I can see the carousel controls changing, but no images show and no link. When doing an inspection, the link the images point to works fine.

[Aaron Paxson]

Nevermind. I used Marco's CSS Style in the template and works fine.

[Shahid Khan]

If I want to put ‘sequence’ and ‘alternate text’ fields in ImageElementSet then what modifications I need to make here?

[Shahid Khan]

I am able to display it after logged in. but this Carousel is not visible for Guest user.
Can anybody tell me how to overcome this problem?
i tried all basic permissions and settings but still no use

[Sujeet Rai]

Hi Tejas,

Same issue. href" " not responding.
when i am giving link "http://www.google.com" in linkUrl then, that image also disappear.

[Sujeet Rai]

Using Liferay 6.2

[Valentin Rabollet]

Hi Tejas,

I'm a newbie using CE 62 GA2 and I ve created the structure and the template with the scripts above. Suprisingly, the Web Content Display show me this :

-------------------------------------
#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $activeIndex.Data) #set($totalCount = 0)
#foreach($imageElement in $image.getSiblings()) #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") #else #end #set($totalCount = $totalCount + 1) #end #end
#if($totalCount > 0) #end
------------------------------------------------------

Did I miss something? Must I load Alloy UI somewhere first?

Thanks for your help!

[Ved Mishra]

can it be responsive ? because i used this one and its not responsive

[Mohamed Sayed]

can i create a template like this for blogs portlet please advice

[Mohamed Sayed]

can i create a template like this for blogs portlet please advice

[William Sousa]

Hey guys,

How can I implement this code using Liferay7?

There are any example or tutorial for Carousel in Liferay7?

Best regards!