Ocorreu um erro ao processar o template.
The following has evaluated to null or missing:
==> cur_Imagens.getAttribute("alt") [in template "20101#20128#115808" at line 72, column 37]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${cur_Imagens.getAttribute("alt")} [in template "20101#20128#115808" at line 72, column 35]
----
1<#if Imagens.getSiblings()?has_content>
2 <#list Imagens.getSiblings() as cur_Imagens>
3 <#if (cur_Imagens.getData())?? && cur_Imagens.getData() != "">
4 <liferay-util:html-top>
5 <meta property="og:image" content="${cur_Imagens.getData()}" />
6 </liferay-util:html-top>
7 </#if>
8 </#list>
9</#if>
10
11<!--<div class="container">-->
12<div class="cmoContainer">
13 <div class="websiteArticleAspectRatio">
14 <div class="row dif-mtp">
15 <div class="col-12">
16 <h2 class="cmoPageSubtitle">${Titulo.getData()}</h2>
17 </div>
18 <div class="col-12">
19 <h4 class="subtitle">${Subtitulo.getData()}</h4>
20 </div>
21 <div class="col-12 ">
22 <span class="date-text"><#assign newsDate_Data = getterUtil.getString(Data.getData())>
23 <#if validator.isNotNull(newsDate_Data)>
24 <#assign newsDate_DateObj = dateUtil.parseDate("yyyy-MM-dd", newsDate_Data, locale)>
25 ${dateUtil.getDate(newsDate_DateObj, "dd MMM yyyy", locale)}
26 </#if></span>
27 </div>
28 <!-- CATEGORIAS -->
29 <#assign journalLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")>
30 <#assign serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext()>
31 <#assign themeDisplay = serviceContext.getThemeDisplay() />
32 <#assign scopeId = themeDisplay.getScopeGroupId()>
33 <#assign journalArticleId = .vars['reserved-article-id'].data>
34 <#assign articlePrimKey = journalLocalService.getArticle(getterUtil.getLong(scopeId), journalArticleId).resourcePrimKey >
35 <#assign catLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")>
36 <#assign articleCatNames = catLocalService.getCategoryNames("com.liferay.journal.model.JournalArticle", getterUtil.getLong(articlePrimKey)) >
37 <div class="col-12">
38 <ul class="list-inline mt-2">
39 <#list articleCatNames as catnames>
40 <li class="list-inline-item text-type">${catnames}</li>
41 </#list>
42 </ul>
43 <!-- FIM CATEGORIAS -->
44 <!-- REDES SOCIAIS -->
45 <div class="divShare mt-3 pt-2 iconsplMob">
46 <span id="articleLink${randomNamespace}" class="displayPageShareIcons" data-href="www.oeiras.pt/${.vars['reserved-article-url-title'].data}" data-layout="button">
47 <a aria-label="FacebookIcon" id="facebookShare${randomNamespace}" target="_blank" href="">
48 <svg class="shareIcon mr-3">
49 <use href="/o/cmo-theme/images/icons.svg#IconFacebook"></use>
50 </svg>
51 </a>
52 <a aria-label="TwitterIcon" id="twitterShare${randomNamespace}" target="_blank" href="">
53 <svg class="shareIcon">
54 <use href="/o/cmo-theme/images/icons.svg#IconTwitter"></use>
55 </svg>
56 </a>
57 </span>
58 </div>
59 <!-- FIM REDES SOCIAIS -->
60 </div>
61 </div>
62 </div>
63</div>
64<div class="dif-width-container mt-2">
65<div class="margin-stndrd">
66 <div class="row">
67 <!-- <div class="col-12"> -->
68 <div class="col-12 col-lg-6 pl-3 mt-2 mb-4 pt-4">
69 <div class="slider-noticias" id="slider-noticias">
70 <#if Imagens.getSiblings()?has_content>
71 <#list Imagens.getSiblings() as cur_Imagens>
72 <img alt="${cur_Imagens.getAttribute("alt")}" data-fileentryid="${cur_Imagens.getAttribute("fileEntryId")}" src="${cur_Imagens.getData()}" class="imgslider"/>
73 </#list>
74 </#if>
75 <!-- <button class="prev" onclick="moveSlide(-1)">❮</button>
76 <button class="next" onclick="moveSlide(1)">❯</button> -->
77 <button class="prev" onclick="moveSlide(-1)">
78 <svg class="sliderIconPrevious" viewBox="0 0 32 32">
79 <g data-href="/o/cmo-theme/images/icons.svg#logoFooter">
80 <path d="M26.09,11.09,17.5,19.67,8.91,11.09,6.79,13.21l9.65,9.64a1.5,1.5,0,0,0,2.12,0l9.65-9.64Z"></path>
81 </g>
82 </svg>
83 </button>
84 <button class="next" onclick="moveSlide(1)">
85 <svg class="sliderIconNext" viewBox="0 0 32 32">
86 <g data-href="/o/cmo-theme/images/icons.svg#logoFooter">
87 <path d="M26.09,11.09,17.5,19.67,8.91,11.09,6.79,13.21l9.65,9.64a1.5,1.5,0,0,0,2.12,0l9.65-9.64Z"></path>
88 </g>
89 </svg>
90 </button>
91 </div>
92 </div>
93 <!--col-12 image end-->
94 <div class="col-lg-6 col-12 pr-3 mt-4 pt-2 mb-4 prgph-txt-color">
95 ${Corpo.getData()}
96 </div>
97 <!--col-lg-7 end-->
98 </div>
99 <!--col-lg-12 end-->
100 </div>
101 <!--row end-->
102</div>
103<!--end margin standard-->
104
105<#if idVideo.getData()?? && idVideo.getData()!= "">
106<div class="slider_displayPage mt-4 ml-stndrd">
107 <div class="row">
108 <div class="col-md-12 heroSlider-fixed">
109 <div class="overlay"></div>
110 <div class="iframeContainer">
111 <iframe width="560" height="315" src="https://www.youtube.com/embed/${idVideo.getData()?replace("https://youtu.be/", "")}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
112 </div>
113 </div>
114 </div>
115</div>
116</#if>
117
118<style>
119 /* Contêiner do slider */
120 .slider-noticias {
121 position: relative;
122 width: 100%;
123 max-width: 600px;
124 margin: auto;
125 overflow: hidden;
126 }
127
128 /* Cada slide */
129 .slider-noticias img {
130 width: 100%;
131 display: none;
132 transition: all 0.5s ease-in-out;
133 }
134
135 /* Imagem ativa */
136 .slider-noticias .active {
137 display: block;
138 }
139
140 /* Controles de navegação */
141 .slider-noticias .prev,
142 .slider-noticias .next {
143 position: absolute;
144 top: 50%;
145 transform: translateY(-50%);
146 background-color: rgba(0, 0, 0, 0.5);
147 color: white;
148 padding: 0;
149 border: none;
150 cursor: pointer;
151 font-size: 18px;
152 z-index: 100;
153 }
154 .slider-noticias .sliderIconPrevious:hover,
155 .slider-noticias .sliderIconNext:hover {
156 background-color: rgb(196 194 194 / 90%);
157 }
158 .slider-noticias .prev {
159 left: 10px;
160 }
161
162 .slider-noticias .next {
163 right: 10px;
164 }
165
166 /* Ocultar as setas caso haja apenas uma imagem */
167 .slider-noticias .single-image .prev,
168 .slider-noticias .single-image .next {
169 display: none;
170 }
171
172 .slider-noticias img.imgslider.active {
173
174 display: block;
175 }
176
177 .single-image button {
178 display: none;
179 }
180
181 .imgstyl {
182 object-fit: cover;
183 object-position: 90% 80%;
184 }
185 .overlayImg {
186 position: absolute;
187 top: 0;
188 bottom: 0;
189 left: 0;
190 right: 0;
191 height: 100%;
192 opacity: 0;
193 transition: .5s ease;
194 background-color: #0598C1;
195 }
196 .slick-slide:hover .overlayImg {
197 opacity: 0.7;
198 }
199 .overlayBtn {
200 color: white;
201 font-size: 20px;
202 position: absolute;
203 border:none;
204 background-color: deepskyblue;
205 top: 11%;
206 left: 90%;
207 -webkit-transform: translate(-50%, -50%);
208 -ms-transform: translate(-50%, -50%);
209 transform: translate(-50%, -50%);
210 text-align: center;
211 }
212
213 .img-width {
214 width: 100% !important;
215 object-fit: contain !important;
216 object-position: top !important;
217 }
218
219 @media screen and (max-width: 1400px) {
220 .overlayBtn {
221 top: 11.5%;
222 left: 89%;
223 }
224 }
225 @media screen and (max-width: 1200px) {
226 .overlayBtn {
227 top: 11.5%;
228 left: 85.5%;
229 }
230 }
231 @media screen and (max-width: 992px) {
232 .overlayBtn {
233 top: 11.5%;
234 left: 91.5%;
235 }
236 .btnPosition {
237 top: 4%;
238 left: 95%;
239 }
240
241 .margin-stndrd {
242 padding: 0 30px !important;
243 }
244
245 .margin-stndrd > .row {
246 flex-direction: column-reverse;
247 }
248
249 }
250 @media screen and (max-width: 700px) {
251 .overlayBtn {
252 top: 11.5%;
253 left: 92%;
254 }
255 .btnPosition {
256 top: 5%;
257 }
258 }
259 @media screen and (max-width: 400px) {
260 .overlayBtn {
261 top: 11.5%;
262 left: 91%;
263 }
264 .btnPosition {
265 top: 5%;
266 }
267 }
268 @media screen and (max-width: 340px) {
269 .overlayBtn {
270 top: 11.5%;
271 left: 90%;
272 }
273 .btnPosition {
274 top: 6%;
275 }
276 }
277 .prgph-txt-color {
278 color: #707070;
279 }
280 .divshareIcons {
281 white-space: nowrap;
282 }
283 .shareIcon {
284 fill: #008fb6;
285 height: 1.40rem;
286 padding-left:0.7rem;
287 }
288 .subtitle {
289 font-size: 1.40rem;
290 font-family: "Poppins",sans-serif;
291 letter-spacing: 0px;
292 color: #707070;
293 font-weight:500;
294 }
295 .date-text {
296 font: ExtraLight 16px/26px Poppins;
297 letter-spacing: 0px;
298 color: #707070;
299 opacity: 1;
300 }
301 @media screen and (min-width: 1200px) {
302 .img-width {
303 height:201px;
304 width: 100%;
305 }
306 .ml-stndrd {
307 margin-left: 6%;
308 }
309 .margin-stndrd {
310 width: 88%;
311 margin: auto;
312 }
313 .dif-ml {
314 margin: 0 10px;
315 }
316 .hiddn-pc {
317 display:none;
318 }
319 .dif-mtp {
320 margin-top: 4em;
321 }
322 .bgPicture {
323 width: 580px!important;
324 }
325 .bgImg {
326 height : 400px!important;
327 object-fit: unset!important;
328 }
329 .bgSlider {
330 width: 2700px!important;
331 }
332 .bgSmallPicture {
333 padding-top:150px!important;
334 width: 208px!important;
335 }
336 .btnPosition {
337 top: 4%;
338 left: 94.5%;
339 }
340 }
341
342 @media screen and (min-width: 992px) {
343 .img-width {
344 height:201px;
345 width: 100%;
346 }
347 .margin-stndrd {
348 width: 88%;
349 margin: auto;
350 }
351 .ml-stndrd {
352 margin-left: 6%;
353 }
354 .dif-ml {
355 margin: 0 10px;
356 }
357 .hiddn-pc {
358 display:none;
359 }
360 .dif-mtp {
361 margin-top: 4em;
362 }
363 .bgPicture {
364 width: 580px!important;
365 }
366 .bgImg {
367 height : 400px!important;
368 object-fit: unset!important;
369 }
370 .bgSlider {
371 width: 2700px!important;
372 }
373 .bgSmallPicture {
374 padding-top:150px!important;
375 width: 208px!important;
376 }
377 .btnPosition {
378 top: 4%;
379 left: 94.5%;
380 }
381
382 .component-html img {
383 max-width: 100%;
384 height: 100%;
385 max-height: 450px;
386 }
387
388 .margin-stndrd > .row {
389 flex-direction: row-reverse;
390 }
391
392 .img-width {
393 height: 690px !important;
394 }
395 }
396
397 @media screen and (max-width: 768px) {
398 .img-width {
399 height:201px;
400 width: 100%;
401 }
402 .subtitle {
403 font-size: 1.10rem;
404 margin-top:0.5rem;
405 }
406 .iconsplMob {
407 padding-bottom: 1rem;
408 }
409 .dif-ml {
410 margin: 0 20px;
411 }
412 .dif-mtp {
413 margin-top: 2em;
414 }
415 .bgPicture {
416 width: 580px!important;
417 }
418 .bgImg {
419 height : 400px!important;
420 object-fit: unset!important;
421 }
422 .bgSlider {
423 width: 2700px!important;
424 }
425 .bgSmallPicture {
426 padding-top:150px!important;
427 width: 208px!important;
428 }
429 .shareIcon {
430 padding-left: 0;
431 }
432
433 .margin-stndrd {
434 padding: 0 30px !important;
435 }
436
437 .pl-3, .px-3 {
438 padding-left: 0 !important;
439 }
440
441 }
442 @media screen and (max-width: 576px) {
443 .img-width {
444 height:201px;
445 width: 100%;
446 }
447 .subtitle {
448 font-size: 1.10rem;
449 margin-top:0.5rem;
450 }
451 .date-text {
452 display:none;
453 }
454 .dif-ml {
455 margin: 0 20px;
456 }
457 .dif-mtp {
458 margin-top: 2em;
459 }
460 .dif-mtp {
461 margin-top: 2em;
462 }
463 .bgPicture-mob {
464 }
465 .bgImg {
466 height : 280px!important;
467 object-fit: unset!important;
468 }
469 .bgSlider {
470 width: 2300px!important;
471 }
472 .bgSmallPicture {
473 padding-top:150px!important;
474 /* width: 150px!important; */
475 }
476 }
477 .text-type {
478 font: Regular 16px/25px Poppins;
479 letter-spacing: 0px;
480 color: #1DC2F3;
481 opacity: 1;
482 border-bottom: 1px solid #1DC2F3;
483 }
484 .mtp {
485 margin-top: 4em;
486 }
487 .img-width-bread {
488 width:30%;
489 height: 100px;
490 }
491 .slider_displayPage{
492 overflow:hidden;
493 }
494 .slider_displayPage .slick-dots{
495 display:none!important;
496 }
497 .sliderPrev_displayPage{
498 position: absolute;
499 top: 20%;
500 left:3%;
501 cursor:pointer;
502 }
503 .sliderNext_displayPage{
504 position: absolute;
505 top: 20%;
506 right:3%;
507 cursor:pointer;
508 }
509 .imgGallery{
510 margin-bottom: 20px;
511 margin-right: 10px;
512 object-fit: cover;
513 object-position: 50% 0%;
514 width: 100%;
515 height: 150px;
516 }
517 .hidn {
518 visibility: hidden;
519 }
520</style>
521<script>
522 //REDES SOCIAIS
523 var articlelink${randomNamespace} = document.getElementById('articleLink${randomNamespace}').getAttribute("data-href");
524 var fbDefault${randomNamespace} = "https://www.facebook.com/sharer.php?u=";
525 var twDefault${randomNamespace} = "https://twitter.com/intent/tweet?url=";
526
527 var EncShareFb${randomNamespace} = fbDefault${randomNamespace} + encodeURIComponent(articlelink${randomNamespace});
528 var EncShareTw${randomNamespace} = twDefault${randomNamespace} + encodeURIComponent(articlelink${randomNamespace});
529
530
531 document.getElementById('facebookShare${randomNamespace}').setAttribute("href", EncShareFb${randomNamespace});
532 document.getElementById('twitterShare${randomNamespace}').setAttribute("href", EncShareTw${randomNamespace});
533
534 $('.responsivedisplayPage').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
535
536 var slid_displayPage = document.getElementsByClassName('slider_displayPage')[0];
537 var uls_displayPage = slid_displayPage.getElementsByClassName('slick-dots'); // todos os ul's
538 var ul_displayPage = uls_displayPage[uls_displayPage.length - 1]; // ul's com os lis da paginação
539 var lisCount_displayPage = ul_displayPage.childElementCount; // 2
540 var lis_displayPage = ul_displayPage.children;
541
542 console.log();
543
544 if (screen.width > 991) {
545 if (lisCount_displayPage > 1){
546 for (var i = 0; i < lis_displayPage.length; i++) {
547 if (lis_displayPage[i].className == 'slick-active') {
548 if (i == 0) {
549 $(".sliderPrev_displayPage").css("display", "none");
550 $(".sliderNext_displayPage").css("display", "block");
551 }
552 else if (i == lisCount_displayPage-1){
553 $(".sliderPrev_displayPage").css("display", "block");
554 $(".sliderNext_displayPage").css("display", "none");
555
556 }
557 else {
558 $(".sliderPrev_displayPage").css("display", "block");
559 $(".sliderNext_displayPage").css("display", "block");
560 }
561 }
562 }
563 } else {
564 $(".sliderPrev_displayPage").css("display", "none");
565 $(".sliderNext_displayPage").css("display", "none");
566 }
567 } else {
568 $(".sliderPrev_displayPage").css("display", "none");
569 $(".sliderNext_displayPage").css("display", "none");
570 }
571 });
572
573 $('.responsivedisplayPage').slick({
574 prevArrow: $(".sliderPrev_displayPage"),
575 nextArrow: $(".sliderNext_displayPage"),
576 dots: true,
577 infinite: false,
578 speed: 300,
579 slidesToShow: 4,
580 slidesToScroll: 4,
581 customPaging : function(slider, i) {
582 //var thumb = $(slider.$slides[i]).data();
583 return '<a class="dot">'+(i+1)+'</a><a class="ellipsis-dot" style="display: none">...</a>';
584 },
585 responsive: [
586 {
587 breakpoint: 991,
588 settings: {
589 slidesToShow: 2,
590 slidesToScroll: 2,
591 infinite: false,
592 dots: true
593 }
594 },
595 {
596 breakpoint: 576,
597 settings: {
598 slidesToShow: 1,
599 slidesToScroll: 1,
600 infinite: false,
601 dots: true
602 }
603 }
604 ]
605 });
606
607
608
609
610
611
612
613
614 $(".slick-slide").mouseover(function() {
615 var $picture = $(event.currentTarget);
616 var $img = $picture.find( "img");
617 var $width = $img.width();
618
619 if(screen.width <= 768) {
620 $div = $picture.find(".overlayImg");
621 $div.css("display", "block");
622 }
623
624 var $pictureWidth = parseInt($picture[0].clientWidth);
625 var $leftStyle;
626 var $slickIndex = parseInt($picture[0].dataset.slickIndex);
627
628 if( $slickIndex > 0)
629 $leftStyle = $slickIndex * $pictureWidth;
630 else
631 $leftStyle = 0;
632
633
634 //Verify if exists any image bigger, if exists dont add overlay
635 var $slider = $picture.parent();
636 var $any;
637 $.each( $slider[0].children, function( key ) {
638 var $el = $(this);
639 $picImg = $el.find(".imgGallery");
640
641 if($el.hasClass("bgPicture") || $picImg.hasClass("bgImg")){
642 $any = true;
643 }
644 });
645
646
647 if($any == undefined || $any == false ) {
648 if($picture != undefined && $($picture[0].lastElementChild).is("div") == false)
649 $picture.append( '<div class="overlayImg" style="width:' + $width + 'px; left:' + $leftStyle
650 +'px"> <button class="overlayBtn" onclick="scaleImg()"><span class="hidn">Hello</span></button></div>');
651
652 }
653
654 });
655
656
657
658
659
660 function scaleImg() {
661
662 var $btn = $(event.currentTarget);
663 var $picture = $btn.parent().parent();
664
665
666 var $slider = $picture.parent();
667 var $img = $picture.find( "img");
668
669
670 var $normalImgWidth =$(".slick-slide").last().width();
671
672 if( $slider.hasClass( "bgSlider" ) == false) {
673
674 var $picwidth = $picture.width();
675
676 if(screen.width > 578)
677 $picture.addClass("bgPicture");
678
679 var $width = $img.width();
680 $img.addClass("bgImg");
681
682 if(screen.width <= 578) {
683 $picture.attr('style', 'width:' + screen.width +'px !important');
684 $img.attr('style', 'width:' + screen.width +'px !important');
685 $width = $img.width();
686 }
687
688 $slider.addClass("bgSlider");
689 $btn.addClass("btnPosition");
690
691
692
693 $.each( $slider[0].children, function( key ) {
694 var $el = $(this);
695 if($el[0].id != $picture[0].id) {
696
697 if(screen.width > 578)
698 $el.addClass("bgSmallPicture");
699
700 if($el[0].innerHTML.includes("div")) {
701 $div = $($el[0].children[3]);
702 $div.remove();
703 }
704 }
705 else {
706 $div = $($el[0].children[3]);
707 var $left = parseInt($div.position().left);
708
709 var $smallImgWidth =$(".bgSmallPicture").first().width();
710 //if(screen.width <= 578)
711 // $smallImgWidth = $picture.width();
712
713
714 var $diff = $normalImgWidth - $smallImgWidth;
715 if(key > 0)
716 $diff = $diff * key;
717 var $newLeft = ($left - $diff);
718
719 $div.css("left", $newLeft + "px");
720 $div.css("width", $width );
721 }
722 });
723
724 }
725 else {
726
727
728 $picture.removeClass("bgPicture");
729 $img.removeClass("bgImg");
730 $slider.removeClass("bgSlider");
731 $btn.removeClass("btnPosition");
732
733
734 var oldPicWidth;
735
736
737 $.each( $slider[0].children, function( key ) {
738 var $el = $(this);
739 if($el[0].id != $picture[0].id) {
740 $el.removeClass("bgSmallPicture ");
741
742 if(screen.width <= 578) {
743 oldPicWidth = $el.width();
744 $otherImg = $el.find(".imgGallery");
745 oldImgWidth = $otherImg.width();
746 }
747
748 }
749 else
750 {
751 if($el[0].innerHTML.includes("div")) {
752 $div = $($el[0].children[3]);
753 $div.remove();
754 }
755 }
756 });
757
758 if(screen.width <= 578 && oldPicWidth != undefined) {
759 $picture.attr('style', 'width:' + oldPicWidth +'px !important');
760 $img.attr('style', 'width: 100%');
761 }
762
763 }
764 }
765
766
767 $( ".slick-track" ).on("touchmove", function() {
768
769 var $btn = $(".btnPosition");
770 if(screen.width <= 578 && $btn[0] != undefined) {
771
772 var $picture = $btn.parent().parent();
773 var $slider = $picture.parent();
774 var $img = $picture.find( "img");
775
776 $picture.removeClass("bgPicture");
777 $img.removeClass("bgImg");
778 $slider.removeClass("bgSlider");
779 $btn.removeClass("btnPosition");
780
781
782 var oldPicWidth;
783
784
785 $.each( $slider[0].children, function( key ) {
786 var $el = $(this);
787 if($el[0].id != $picture[0].id) {
788 $el.removeClass("bgSmallPicture ");
789
790 if(screen.width <= 578) {
791 oldPicWidth = $el.width();
792 $otherImg = $el.find(".imgGallery");
793 oldImgWidth = $otherImg.width();
794 }
795
796 }
797 else
798 {
799 if($el[0].innerHTML.includes("div")) {
800 $div = $($el[0].children[3]);
801 $div.remove();
802 }
803 }
804 });
805
806 if(screen.width <= 578 && oldPicWidth != undefined) {
807 $picture.attr('style', 'width:' + oldPicWidth +'px !important');
808 $img.attr('style', 'width: 100%');
809 }
810
811 }
812 });
813
814document.addEventListener('DOMContentLoaded', function () {
815 // Obtém todas as imagens do slider
816 const slides = document.querySelectorAll('.slider-noticias img');
817 const sliderContainer = document.getElementById('slider-noticias');
818 let currentSlide = 0;
819
820 // Função para mostrar a imagem com base no índice
821 function showSlide(index) {
822 if (index >= slides.length) {
823 currentSlide = 0;
824 } else if (index < 0) {
825 currentSlide = slides.length - 1;
826 } else {
827 currentSlide = index;
828 }
829
830 // Esconde todas as imagens
831 slides.forEach((slide) => {
832 slide.classList.remove('active');
833 });
834
835 // Mostra a imagem atual
836 slides[currentSlide].classList.add('active');
837 }
838
839 // Função para mover entre os slides
840 function moveSlide(direction) {
841 showSlide(currentSlide + direction);
842 }
843
844 // Torna a função `moveSlide` globalmente acessível
845 window.moveSlide = moveSlide;
846
847 // Inicializa o slider (mostra o primeiro slide)
848 showSlide(currentSlide);
849
850 // Verifica se há apenas uma imagem e oculta as setas
851 if (slides.length === 1) {
852 sliderContainer.classList.add('single-image');
853 }
854
855 // Caso queira um slider automático, use o setInterval
856 setInterval(() => {
857 if (slides.length > 1) {
858 moveSlide(1); // Muda para o próximo slide a cada 5 segundos
859 }
860 }, 5000);
861});
862
863</script>