Image Carousel

[gordon daniels，修改在11 年前。]

Hi,

I am trying to learn AUI and have a question. Is it possible to take the image carousel code for example, and create web content, structure, and template within the control panel or do I need to do this at the file level?

Might seem like a dumb question

thanks

[gordon daniels，修改在11 年前。]

bump: sure could use some advice here.

[Hitoshi Ozawa，修改在11 年前。]

Are you asking if you can use alloy ui tags in velocity templates?

[gordon daniels，修改在11 年前。]

Hi Hitoshi: yes that is what I am asking.

[iqbal ahmed，修改在11 年前。]

Hi,

definitely we can use alloy UI tags in Velocity Template. below is the velocity template code which i have written for carosel.

#set($imageWidth = $maxImageWidth.Data)
#set($imageHeight = $maxImageHeight.Data)
#set($imageWidthPx = $imageWidth + "px")
#set($imageHeightPx = $imageHeight + "px")
#set($interval = $timeInterval.Data)
#set($activeIndexValue = $activeIndex.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

[gordon daniels，修改在11 年前。]

iqbal: thank you for your reply. This is very helpful to learn from.

thanks again