1<#if entries?has_content>
2 <div class="container">
3 <div class="classepaia">
4 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
5 <ol class="carousel-indicators carousel_principal_indicators">
6 <#list entries as curEntry>
7 <#if curEntry?index == 0 >
8 <li data-target="#carouselExampleIndicators" data-slide-to="${curEntry?index}" class="active"></li>
9 <#else>
10 <li data-target="#carouselExampleIndicators" data-slide-to="${curEntry?index}"></li>
11 </#if>
12 </#list>
13 </ol>
14 <div id="carrosselField" class="carousel-inner">
15 <#list entries as curEntry>
16 <#assign
17 assetRenderer = curEntry.getAssetRenderer()
18 serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext()
19 dlAppLocalServiceUtil = staticUtil["com.liferay.document.library.kernel.service.DLAppLocalServiceUtil"]
20 dlUtil = staticUtil["com.liferay.document.library.kernel.util.DLUtil"]
21 link = assetRenderer.getURLViewInContext(renderRequest, renderResponse, '')
22 />
23
24 <#assign docXml = saxReaderUtil.read(assetRenderer.getArticle().getContent()) />
25
26 <#assign
27 titulo = docXml.valueOf("//dynamic-element[@name='titulo']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
28 descricao = docXml.valueOf("//dynamic-element[@name='descricao']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
29 cta = docXml.valueOf("//dynamic-element[@name='cta']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
30 url = docXml.valueOf("//dynamic-element[@name='url']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
31 imagemCard = docXml.valueOf("//dynamic-element[@name='imagem']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
32 />
33 <#assign description="" />
34 <#if imagemCard?has_content>
35 <#assign
36 imagem = imagemCard?eval
37 imagemUuid = imagem.uuid
38 groupId = imagem.groupId
39 dlFile = dlAppLocalServiceUtil.getFileEntryByUuidAndGroupId(imagemUuid,groupId?number)
40 imgUrl = dlUtil.getPreviewURL(dlFile, dlFile.getFileVersion(),themeDisplay,'')
41 />
42 <#assign description = imagem.alt?string!"">
43 </#if>
44 <#if description=="">
45 <#assign description = "sem descrição textual">
46 </#if>
47 <div class="carousel-item bg-gray">
48 <div class="row">
49 <div class="col-12 col-lg-6 cmpimg">
50 <img loading="lazy" alt="${description}" class="w-100" src="${imgUrl}">
51 </div>
52 <div class="col-12 col-lg-6 camptxt">
53 <h2>${titulo}</h2>
54 <p>${descricao}</p>
55 <#if cta?has_content>
56 <span>
57 <svg id="direita" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
58 <g id="Grupo_1585" data-name="Grupo 1585" transform="translate(-412 281) rotate(-90)">
59 <rect id="Retângulo_356" data-name="Retângulo 356" width="20" height="20" transform="translate(261 412)" fill="none"/>
60 <path id="Caminho_382" data-name="Caminho 382" d="M171.476,425.028a.748.748,0,0,1-.559-.25l-5.724-6.4-6.177,6.418a.75.75,0,1,1-1.081-1.04l6.737-7a.75.75,0,0,1,1.1.02l6.263,7a.75.75,0,0,1-.559,1.25Z" transform="translate(435.976 843.778) rotate(180)" fill="#ec6e0c"/>
61 </g>
62 </svg>
63 </span>
64 <a href="${url}">${cta}</a>
65 </#if>
66 </div>
67 </div>
68 </div>
69 </#list>
70 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
71 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
72 <span class="sr-only">Previous</span>
73 </a>
74 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
75 <span class="carousel-control-next-icon" aria-hidden="true"></span>
76 <span class="sr-only">Next</span>
77 </a>
78 </div>
79
80 </div>
81 </div>
82 </div>
83</#if>
84
85
86<style>
87.bg-gray{
88 background: #FFFFFF 0% 0% no-repeat padding-box;
89 box-shadow: 4px 4px 16px #00000029;
90 border-radius: 8px;
91 margin-top: 60px;
92 margin-bottom: 80px;
93 }
94
95 .classepaia .carousel-item{
96 width: 98%;
97 }
98
99 .classepaia .carousel-control-prev, .classepai .carousel-control-next{
100 display: none;
101 }
102
103 .carousel_principal_indicators li{
104 font-size: 0;
105 width: 7px !important;
106 height: 7px !important;
107 border: 2px solid #ec6e0c;
108 background: transparent;
109 border-radius: 50%;
110 margin-bottom: 6px !important;
111 }
112
113 .carousel_principal_indicators .active{
114 border: 3px solid #ec6e0c;
115 border-radius: 17px;
116 width: 20px !important;
117 height: 0px;
118 background: #ec6e0c !important;
119 }
120
121 .camptxt{
122 padding: 30px 50px 25px 25px;
123 }
124
125 .camptxt h2{
126 font-family:"oxygen-bold";
127 font-size: 24px;
128}
129
130.camptxt p{
131 font-family:"oxygen-regular";
132 font-size: 16px;
133}
134
135.camptxt a{
136 font-family:"oxygen-bold";
137 font-size: 16px;
138 color: #EC6E0C;
139 text-decoration: underline;
140}
141
142.camptxt span{
143 font-size: 20px;
144 display: inline-block;
145 margin-right: 10px;
146 color: #EC6E0C;
147}
148
149
150 .cmpimg img{
151 border-radius: 8px;
152 }
153
154 @media (min-width: 991px) and (max-width: 1200px){
155 .cmpimg img{
156 min-height: 310px;
157 }
158 }
159
160 @media (max-width: 991px){
161 .cmpimg img{
162 border-radius: 10px;
163 }
164 .camptxt{
165 padding: 20px 40px;
166 }
167 }
168</style>
169<script>
170$('#carrosselField div:first').addClass('active');
171</script>
