Predefinição:CarrousselAvancado: mudanças entre as edições

Edição das 16h26min de 24 de novembro de 2024

     [[File:{{{Slide1Image}}}|class=img-fluid|alt={{{Slide1Alt}}}|style=width:100%;height:auto;]]

       <a href="{{{Slide1Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide1Title}}}</a>

{{{Slide1Description}}}

     [[File:{{{Slide2Image}}}|class=img-fluid|alt={{{Slide2Alt}}}|style=width:100%;height:auto;]]

       <a href="{{{Slide2Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide2Title}}}</a>

{{{Slide2Description}}}

     [[File:{{{Slide3Image}}}|class=img-fluid|alt={{{Slide3Alt}}}|style=width:100%;height:auto;]]

       <a href="{{{Slide3Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide3Title}}}</a>

{{{Slide3Description}}}

     [[File:{{{Slide4Image}}}|class=img-fluid|alt={{{Slide4Alt}}}|style=width:100%;height:auto;]]

       <a href="{{{Slide4Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide4Title}}}</a>

{{{Slide4Description}}}

 <a class="carousel-control-prev" href="#photo-slider" role="button" data-slide="prev">
   
   Anterior
 </a>
 <a class="carousel-control-next" href="#photo-slider" role="button" data-slide="next">
   
   Próximo
 </a>

Esta predefinição exibe um carrossel responsivo com imagens, títulos e textos clicáveis. Parâmetros:

Slide1, Slide2, Slide3, Slide4: Ative os slides desejados (ex. "sim").
SlideXImage: Nome da imagem.
SlideXAlt: Texto alternativo para acessibilidade.
SlideXLink: Link clicável.
SlideXTitle: Título do slide.
SlideXDescription: Descrição breve.

@@ Linha 1: / Linha 1: @@
-<div id="carouselAvancado" class="carousel slide" data-bs-ride="carousel" style="width:100%; max-width:100%;">
+<div id="photo-slider" class="carousel slide" data-ride="carousel" style="width: 100%;">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+    {{#if: {{{Slide1}}} | <li data-target="#photo-slider" data-slide-to="0" class="active"></li> }}
+    {{#if: {{{Slide2}}} | <li data-target="#photo-slider" data-slide-to="1"></li> }}
+    {{#if: {{{Slide3}}} | <li data-target="#photo-slider" data-slide-to="2"></li> }}
+    {{#if: {{{Slide4}}} | <li data-target="#photo-slider" data-slide-to="3"></li> }}
+  </ol>
+  <!-- Slides -->
    <div class="carousel-inner">
-     {{{Slides}}}
+     {{#if: {{{Slide1}}} |
+    <div class="carousel-item active">
+      [[File:{{{Slide1Image}}}|class=img-fluid|alt={{{Slide1Alt}}}|style=width:100%;height:auto;]]
+      <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
+        <a href="{{{Slide1Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide1Title}}}</a>
+        <p style="color:white; font-size:1rem;">{{{Slide1Description}}}</p>
+      </div>
+    </div>
+    }}
+    {{#if: {{{Slide2}}} |
+    <div class="carousel-item">
+      [[File:{{{Slide2Image}}}|class=img-fluid|alt={{{Slide2Alt}}}|style=width:100%;height:auto;]]
+      <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
+        <a href="{{{Slide2Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide2Title}}}</a>
+        <p style="color:white; font-size:1rem;">{{{Slide2Description}}}</p>
+      </div>
+    </div>
+    }}
+    {{#if: {{{Slide3}}} |
+    <div class="carousel-item">
+      [[File:{{{Slide3Image}}}|class=img-fluid|alt={{{Slide3Alt}}}|style=width:100%;height:auto;]]
+      <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
+        <a href="{{{Slide3Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide3Title}}}</a>
+        <p style="color:white; font-size:1rem;">{{{Slide3Description}}}</p>
+      </div>
+    </div>
+    }}
+    {{#if: {{{Slide4}}} |
+    <div class="carousel-item">
+      [[File:{{{Slide4Image}}}|class=img-fluid|alt={{{Slide4Alt}}}|style=width:100%;height:auto;]]
+      <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
+        <a href="{{{Slide4Link}}}" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">{{{Slide4Title}}}</a>
+        <p style="color:white; font-size:1rem;">{{{Slide4Description}}}</p>
+      </div>
+    </div>
+    }}
    </div>
-   <!-- Botões de navegação -->
-   <button class="carousel-control-prev" type="button" data-bs-target="#carouselAvancado" data-bs-slide="prev">
+   <!-- Controls -->
+   <a class="carousel-control-prev" href="#photo-slider" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-     <span class="visually-hidden">Anterior</span>
+     <span class="sr-only">Anterior</span>
-   </button>
+   </a>
-   <button class="carousel-control-next" type="button" data-bs-target="#carouselAvancado" data-bs-slide="next">
+   <a class="carousel-control-next" href="#photo-slider" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-     <span class="visually-hidden">Próximo</span>
+     <span class="sr-only">Próximo</span>
-   </button>
+   </a>
 </div>
+<noinclude>
+Esta predefinição exibe um carrossel responsivo com imagens, títulos e textos clicáveis.
+Parâmetros:
+* Slide1, Slide2, Slide3, Slide4: Ative os slides desejados (ex. "sim").
+* SlideXImage: Nome da imagem.
+* SlideXAlt: Texto alternativo para acessibilidade.
+* SlideXLink: Link clicável.
+* SlideXTitle: Título do slide.
+* SlideXDescription: Descrição breve.
+</noinclude>