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.

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

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!

Thank you Tejas, thad did the trick!

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

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)

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

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

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

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.

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

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

Hi Tejas,

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

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!

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

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

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

Hey guys,

How can I implement this code using Liferay7?

There are any example or tutorial for Carousel in Liferay7?

Best regards!