ADT Carousel

carousel.adt

<#if entries?has_content>
	    <style>
		    #<@portlet.namespace />carousel .carousel-item { background-color: #000; height: 400px; overflow: hidden; text-align: center; /*width: 1024px;*/ } 
            #<@portlet.namespace />carousel .carousel-item img { max-height: 400px; /*max-width: 1024px;*/ } 
        </style> 
        <div id="<@portlet.namespace />carousel"> 
            <#list entries as curEntry> 
                <div class="carousel-item image-viewer-base-image"> 
                    <#assign renderer = curEntry.getAssetRenderer() />
                    <#assign journalArticle = renderer.getArticle() />
                    <@liferay_journal["journal-article"]
                            articleId=journalArticle.getArticleId()
                            ddmTemplateKey="120662"
                            groupId=journalArticle.getGroupId() />
                </div>
            </#list> 
        </div> 
        <@liferay_aui.script use="aui-carousel"> var carousel = new A.Carousel( { after: { responsive: function(event) { event.stopImmediatePropagation(); var boundingBox = event.currentTarget.get('boundingBox'); boundingBox.all('.image-viewer-base-image-list, .image-viewer-base-image').setStyles( { height: 'auto', maxHeight: event.height, maxWidth: event.width, width: 'auto' } ); } }, contentBox: '#<@portlet.namespace />carousel', height: 400, intervalTime: 5, width: 962 } ).render(); </@liferay_aui.script> 
    </#if>

carousel2.adt

<#if entries?has_content>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <#list entries as curEntry>
      <#if curEntry?is_first>
        <li data-target="#carouselExampleIndicators" data-slide-to="${curEntry?index}" class="active"></li>
      <#else>
        <li data-target="#carouselExampleIndicators" data-slide-to="${curEntry?index}"></li>
      </#if>
    </#list> 
  </ol>
  <div class="carousel-inner">
    <#list entries as curEntry>
    <#if curEntry?is_first>
    <div class="carousel-item active">
    <#else>
    <div class="carousel-item">
    </#if>
      <#assign renderer = curEntry.getAssetRenderer() />
      <#assign journalArticle = renderer.getArticle() />
      <@liferay_journal["journal-article"]
                articleId=journalArticle.getArticleId()
                ddmTemplateKey="120662"
                groupId=journalArticle.getGroupId() />
    </div>
    </#list> 
  </div>
</div>
</#if>

item.ftl

<#if Image.getData()?? && Image.getData() != "">
<div class="aspect-ratio aspect-ratio-16-to-9">
	<img alt="${Image.getAttribute("alt")}" data-fileentryid="${Image.getAttribute("fileEntryId")}" src="${Image.getData()}" class="aspect-ratio-item-vertical-fluid"/> 
	<span class="sticker sticker-danger sticker-xl" style="position: absolute; bottom: 60px; width: 100%">
		<span class="sticker-overlay">${.vars['reserved-article-title'].data}</span>
	</span>
</div>
</#if>