Carousel with Structure and Temple in WCD

Vikash Kumar
Vikash Kumar
Less Than a Minute Read

Struture

 

 
<root available-locales="en_US" default-locale="en_US">
<dynamic-element dataType="string" indexType="keyword" localizable="true" name="title" readOnly="false" repeatable="true" required="false" showLabel="true" type="text" width="small">
<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" localizable="true" name="image" readOnly="false" repeatable="false" required="false" showLabel="true" type="wcm-image" width="">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Image]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Title]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" localizable="true" name="intervaltime" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Interval Time]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[Interval Time should be in millisecond]]>
</entry>
</meta-data>
</dynamic-element>
</root>

Template(ftl)

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider.min.js"></script>
<script>
   $(document).ready(function() {
 $('.flexslider').flexslider({
   animation: "slide",
   slideshowSpeed: ${intervaltime.getData()},      
animationDuration: 0,
pauseOnHover: true
 });
});
</script>
 
<style>
.flex-direction-nav{
display:none;
}
 
.flex-control-paging{
display:none
}
 
.flexslider {
    text-align:center;
    width:100%;
}
 
.title{
    text-decoration:underline;
    font-size: 15px;
    font-weight: bold;
    font-style: italic;
    text-align:center;
    color:#000;
}
 
</style>
 
<#if title.getSiblings()?has_content>
    <div class="flexslider">
        <ul class="slides">   
        <#list title.getSiblings() as cur_title>
           <li>
              <div>
                   <p class="title">${cur_title.getData()}</p>
                   <img src="${cur_title.image.getData()}" alt"">
               </div>
           </li>
        </#list>
        </ul>
    </div>
</#if>

 

Page Comments

Related Assets...

No Results Found

More Blog Entries...

Ben Turner
October 21, 2025
Michael Wall
October 14, 2025
YOGESH CHANDRA
October 08, 2025