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

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

   {{{Slides}}}

 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
   
   Anterior
 </button>
 <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
   
   Próximo
 </button>

Esta predefinição exibe um carrossel responsivo com imagens, títulos e textos clicáveis. Para usar, veja o exemplo abaixo:

{{CarrousselAvancado
| Slides =
  <div class="carousel-item active">
    [[File:Imagem1.jpg|class=img-fluid|alt=Descrição da Imagem 1|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="https://exemplo.com/link1" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título 1</a>
      <p style="color:white; font-size:1rem;">Descrição breve do primeiro slide</p>
    </div>
  </div>
  <div class="carousel-item">
    [[File:Imagem2.jpg|class=img-fluid|alt=Descrição da Imagem 2|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="https://exemplo.com/link2" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título 2</a>
      <p style="color:white; font-size:1rem;">Descrição breve do segundo slide</p>
    </div>
  </div>
}}

@@ Linha 1: / Linha 1: @@
-<div id="photo-slider" class="carousel slide" data-ride="carousel" style="width: 100%; max-width: 100%; height: auto;">
+<div id="carouselExample" class="carousel slide" data-bs-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> }}
-  </ol>
-  <!-- Slides -->
    <div class="carousel-inner">
-     {{#if: {{{Slide1}}} |
+     {{{Slides}}}
-    <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="position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); padding: 20px; text-align: left;">
-        <h5 style="color: white; font-size: 1.8rem; font-weight: bold;">{{{Slide1Title}}}</h5>
-        <p style="color: white; font-size: 1.2rem;">{{{Slide1Description}}}</p>
-        <a href="{{{Slide1Link}}}" style="color: #ffffff; text-decoration: underline; font-size: 1rem;">Leia mais</a>
-      </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="position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); padding: 20px; text-align: left;">
-        <h5 style="color: white; font-size: 1.8rem; font-weight: bold;">{{{Slide2Title}}}</h5>
-        <p style="color: white; font-size: 1.2rem;">{{{Slide2Description}}}</p>
-        <a href="{{{Slide2Link}}}" style="color: #ffffff; text-decoration: underline; font-size: 1rem;">Leia mais</a>
-      </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="position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); padding: 20px; text-align: left;">
-        <h5 style="color: white; font-size: 1.8rem; font-weight: bold;">{{{Slide3Title}}}</h5>
-        <p style="color: white; font-size: 1.2rem;">{{{Slide3Description}}}</p>
-        <a href="{{{Slide3Link}}}" style="color: #ffffff; text-decoration: underline; font-size: 1rem;">Leia mais</a>
-      </div>
-    </div>
-    }}
    </div>
+   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="sr-only">Anterior</span>
+     <span class="visually-hidden">Anterior</span>
-   </a>
+   </button>
-   <a class="carousel-control-next" href="#photo-slider" role="button" data-slide="next">
+   <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-     <span class="sr-only">Próximo</span>
+     <span class="visually-hidden">Próximo</span>
-   </a>
+   </button>
 </div>
+<noinclude>
+Esta predefinição exibe um carrossel responsivo com imagens, títulos e textos clicáveis.
+Para usar, veja o exemplo abaixo:
+<pre>
+{{CarrousselAvancado
+| Slides =
+  <div class="carousel-item active">
+    [[File:Imagem1.jpg|class=img-fluid|alt=Descrição da Imagem 1|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="https://exemplo.com/link1" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título 1</a>
+      <p style="color:white; font-size:1rem;">Descrição breve do primeiro slide</p>
+    </div>
+  </div>
+  <div class="carousel-item">
+    [[File:Imagem2.jpg|class=img-fluid|alt=Descrição da Imagem 2|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="https://exemplo.com/link2" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título 2</a>
+      <p style="color:white; font-size:1rem;">Descrição breve do segundo slide</p>
+    </div>
+  </div>
+}}
+</pre>
+</noinclude>