1<#if entries?has_content>
2 <div class="container">
3 <div class="classepaia">
4 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
5
6 <div id="carrosselField" class="carousel-inner">
7 <#list entries as curEntry>
8 <#assign
9 assetRenderer = curEntry.getAssetRenderer()
10 serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext()
11 dlAppLocalServiceUtil = staticUtil["com.liferay.document.library.kernel.service.DLAppLocalServiceUtil"]
12 dlUtil = staticUtil["com.liferay.document.library.kernel.util.DLUtil"]
13 link = assetRenderer.getURLViewInContext(renderRequest, renderResponse, '')
14 />
15
16 <#assign docXml = saxReaderUtil.read(assetRenderer.getArticle().getContent()) />
17
18 <#assign
19 titulo = docXml.valueOf("//dynamic-element[@name='titulo']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
20 descricao = docXml.valueOf("//dynamic-element[@name='descricao']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
21 cta = docXml.valueOf("//dynamic-element[@name='cta']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
22 url = docXml.valueOf("//dynamic-element[@name='url']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
23 imagemCard = docXml.valueOf("//dynamic-element[@name='imagem']/dynamic-content[@language-id='"+themeDisplay.getLocale()+"']/text()")
24 />
25 <#assign description="" />
26 <#if imagemCard?has_content>
27 <#assign
28 imagem = imagemCard?eval
29 imagemUuid = imagem.uuid
30 groupId = imagem.groupId
31 dlFile = dlAppLocalServiceUtil.getFileEntryByUuidAndGroupId(imagemUuid,groupId?number)
32 imgUrl = dlUtil.getPreviewURL(dlFile, dlFile.getFileVersion(),themeDisplay,'')
33 />
34 <#assign description = imagem.alt?string!"">
35 </#if>
36 <#if description=="">
37 <#assign description = "sem descrição textual">
38 </#if>
39 <div class="carousel-item bg-gray" tabindex="0">
40 <div class="row">
41 <div class="col-12 col-lg-6 cmpimg">
42 <img loading="lazy" alt="${description}" class="w-100" src="${imgUrl}">
43 </div>
44 <div class="col-12 col-lg-6 camptxt">
45 <h2 tabindex="0">${titulo}</h2>
46 <div tabindex="0">${descricao}</div>
47 <#if cta?has_content>
48 <span tabindex="0">
49 <svg id="direita" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
50 <g id="Grupo_1585" data-name="Grupo 1585" transform="translate(-412 281) rotate(-90)">
51 <rect id="Retângulo_356" data-name="Retângulo 356" width="20" height="20" transform="translate(261 412)" fill="none"/>
52 <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"/>
53 </g>
54 </svg>
55 </span>
56 <a href="${url}">${cta}</a>
57 </#if>
58 </div>
59 </div>
60 </div>
61 </#list>
62 <a class="carousel-control-prev" aria-label="prev slide" href="#carouselExampleIndicators" role="button" data-slide="prev">
63 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
64 <span class="sr-only">Previous</span>
65 </a>
66 <a class="carousel-control-next" aria-label="next slide" href="#carouselExampleIndicators" role="button" data-slide="next">
67 <span class="carousel-control-next-icon" aria-hidden="true"></span>
68 <span class="sr-only">Next</span>
69 </a>
70 </div>
71 <!-- ajuste de css-->
72 <ol class="carousel-indicators carousel_principal_indicators">
73 <#list entries as curEntry>
74 <#if curEntry?index==0>
75 <!-- <li tabindex="0" data-target="#carouselExampleIndicators" data-slide-to="${curEntry?index}" class="active" ></li>-->
76 <li class="active">
77 <button type="button" tabindex="0" data-target="#carouselExampleIndicators"
78 data-slide-to="${curEntry?index}"
79 aria-label="dots Ir para o slide ${curEntry?index + 1}"></button>
80 </li>
81 <#else>
82 <!--<li tabindex="0" data-target="#carouselExampleIndicators" data-slide-to="${curEntry?index}"></li>-->
83 <li>
84 <button type="button" tabindex="0" data-target="#carouselExampleIndicators"
85 data-slide-to="${curEntry?index}"
86 aria-label="dots Ir para o slide ${curEntry?index + 1}"></button>
87 </li>
88 </#if>
89 </#list>
90 </ol>
91 </div>
92 </div>
93 </div>
94</#if>
95
96
97<style>
98 .carousel-control-prev-icon,
99 .carousel-control-next-icon {
100 margin-top: 40px;
101 display: none;
102 }
103.bg-gray{
104 background: #FFFFFF 0% 0% no-repeat padding-box;
105 box-shadow: 4px 4px 16px #00000029;
106 border-radius: 8px;
107 margin-top: 60px;
108 margin-bottom: 80px;
109 }
110
111 .classepaia .carousel-item{
112 width: 98%;
113 }
114
115 .classepaia .carousel-control-prev, .classepai .carousel-control-next{
116 display: none;
117 }
118.carousel_principal_indicators {
119 align-items: center;
120 }
121 .carousel_principal_indicators li{
122 font-size: 0;
123 width: 7px !important;
124 height: 7px !important;
125 border: 2px solid var(--primary);
126 background: transparent;
127 border-radius: 50%;
128 margin-bottom: 6px !important;
129 outline: none !important;
130 }
131.carousel_principal_indicators li button {
132 width: 100%;
133 height: 100%;
134 display: block;
135 border-radius: inherit;
136 background: transparent;
137 border: none;
138 padding: 0;
139 cursor: pointer;
140 }
141
142 .carousel_principal_indicators li button {
143 outline: none !important;
144 }
145
146 .carousel_principal_indicators li:has(button:focus-visible) {
147 outline: 2px solid #000 !important;
148 outline-offset: 0px;
149 }
150
151 .carousel_principal_indicators li:has(button:focus) {
152 outline: none;
153 }
154 .carousel_principal_indicators .active{
155 border: 1px solid var(--primary);
156 border-radius: 17px;
157 width: 20px !important;
158 height: 0px;
159 background: var(--primary) !important;
160 }
161
162 .camptxt{
163 padding: 30px 50px 25px 25px;
164 }
165
166 .camptxt h2{
167 font-family:"oxygen-bold";
168 font-size: 24px;
169}
170
171.camptxt p{
172 font-family:"oxygen-regular";
173 font-size: 16px;
174}
175
176.camptxt a{
177 font-family:"oxygen-bold";
178 font-size: 16px;
179 color: var(--primary);
180}
181
182.camptxt span{
183 font-size: 20px;
184 display: inline-block;
185 margin-right: 10px;
186 color: var(--primary);
187}
188
189
190 .cmpimg img{
191 border-radius: 8px;
192 max-height: 300px;
193 }
194 .carousel-item.active,
195 .nav-underline .tab.active a.carousel-item,
196 .carousel-item-next,
197 .carousel-item-prev {
198 display: flex;
199 }
200 @media (min-width: 991px) and (max-width: 1200px){
201 .cmpimg img{
202 min-height: 310px;
203 }
204 }
205
206 @media (max-width: 991px){
207 .cmpimg img{
208 border-radius: 10px;
209 }
210 .camptxt{
211 padding: 20px 40px;
212 }
213 .carousel-inner {
214 display: flex;
215 align-items: stretch;
216 }
217 }
218 }
219 @media (max-width: 400px) {
220 .cmpimg img {
221 border-radius: 10px;
222 max-height: 400px;
223 min-height: 234px;
224 object-fit: cover;
225 }
226 }
227</style>
228<script>
229$('#carrosselField div:first').addClass('active');
230</script>
