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

Edição das 12h22min de 24 de novembro de 2024

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

       <a href="{{{Link1}}}" style="color:white; text-decoration:none;">{{{Titulo1}}}</a>

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

       <a href="{{{Link2}}}" style="color:white; text-decoration:none;">{{{Titulo2}}}</a>

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

       <a href="{{{Link3}}}" style="color:white; text-decoration:none;">{{{Titulo3}}}</a>

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

       <a href="{{{Link4}}}" style="color:white; text-decoration:none;">{{{Titulo4}}}</a>

 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
   
   Previous
 </button>
 <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
   
   Next
 </button>

Esta predefinição exibe um carrossel responsivo com título e link clicável sobre cada slide. Parâmetros:

`Imagem1`, `Imagem2`, etc. - Caminho das imagens.
`Alt1`, `Alt2`, etc. - Texto alternativo para as imagens.
`Titulo1`, `Titulo2`, etc. - Títulos exibidos sobre as imagens.
`Link1`, `Link2`, etc. - Links clicáveis associados aos títulos.

@@ Linha 1: / Linha 1: @@
-{{#bootstrap_carousel:
+<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" style="width: 100%; max-width: 100%; height: auto; background-color: #670292;">
-| [[File:Memoria_viva_alan_brum_entrevista.jpg|center|alt=Entrevista com Alan Brum|class=img-fluid|style=width:100%;height:auto;]]
+  <div class="carousel-inner">
-<div class="d-none d-md-block" style="position:absolute; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+    <!-- Slide 1 -->
-  <a href="https://wikifavelas.com.br/index.php/Mem%C3%B3ria_Viva_-_Alan_Brum_(s%C3%A9rie_de_entrevistas)" style="color:white; text-decoration:none;">Entrevista com Alan Brum</a>
+    <div class="carousel-item active">
+      [[File:{{{Imagem1}}}|center|alt={{{Alt1}}}|class=img-fluid|style=width:100%;height:auto;]]
+      <div class="d-none d-md-block" style="position:absolute; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+        <a href="{{{Link1}}}" style="color:white; text-decoration:none;">{{{Titulo1}}}</a>
+      </div>
+    </div>
+    <!-- Slide 2 -->
+    <div class="carousel-item">
+      [[File:{{{Imagem2}}}|center|alt={{{Alt2}}}|class=img-fluid|style=width:100%;height:auto;]]
+      <div class="d-none d-md-block" style="position:absolute; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+        <a href="{{{Link2}}}" style="color:white; text-decoration:none;">{{{Titulo2}}}</a>
+      </div>
+    </div>
+    <!-- Slide 3 -->
+    <div class="carousel-item">
+      [[File:{{{Imagem3}}}|center|alt={{{Alt3}}}|class=img-fluid|style=width:100%;height:auto;]]
+      <div class="d-none d-md-block" style="position:relative; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+        <a href="{{{Link3}}}" style="color:white; text-decoration:none;">{{{Titulo3}}}</a>
+      </div>
+    </div>
+    <!-- Slide 4 -->
+    <div class="carousel-item">
+      [[File:{{{Imagem4}}}|center|alt={{{Alt4}}}|class=img-fluid|style=width:100%;height:auto;]]
+      <div class="d-none d-md-block" style="position:absolute; bottom:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+        <a href="{{{Link4}}}" style="color:white; text-decoration:none;">{{{Titulo4}}}</a>
+      </div>
+    </div>
+  </div>
+  <!-- Controles do Carrossel -->
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <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="visually-hidden">Next</span>
+  </button>
 </div>
-| [[File:Memoria viva entrevista Cleonice.jpg|center|alt=Entrevista com Cleonice Dias|class=img-fluid|style=width:100%;height:auto;]]
+<noinclude>
-<div class="d-none d-md-block" style="position:absolute; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+Esta predefinição exibe um carrossel responsivo com título e link clicável sobre cada slide.
-  <a href="https://wikifavelas.com.br/index.php/Mem%C3%B3ria_Viva_-_Cleonice_Dias_(s%C3%A9rie_de_entrevistas)" style="color:white; text-decoration:none;">Entrevista com Cleonice Dias</a>
+Parâmetros:
-</div>
+* `Imagem1`, `Imagem2`, etc. - Caminho das imagens.
-| [[File:Memoria viva entrevista itamar.jpg|center|alt=Entrevista com Itamar Silva|class=img-fluid|style=width:100%;height:auto;]]
+* `Alt1`, `Alt2`, etc. - Texto alternativo para as imagens.
-<div class="d-none d-md-block" style="position:absolute; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
+* `Titulo1`, `Titulo2`, etc. - Títulos exibidos sobre as imagens.
-  <a href="https://wikifavelas.com.br/index.php/Mem%C3%B3ria_Viva_-_Itamar_Silva_(s%C3%A9rie_de_entrevistas)" style="color:white; text-decoration:none;">Entrevista com Itamar Silva</a>
+* `Link1`, `Link2`, etc. - Links clicáveis associados aos títulos.
-</div>
+</noinclude>
-| [[File:Memoria viva entrevista seu beserra.jpg|center|alt=Entrevista com Sr. Beserra|class=img-fluid|style=width:100%;height:auto;]]
-<div class="d-none d-md-block" style="position:absolute; top:20px; left:20px; color:white; font-size:1.5rem; font-weight:bold; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); width:90%; max-width:calc(100% - 40px);">
-  <a href="https://wikifavelas.com.br/index.php/Mem%C3%B3ria_Viva_-_Sr._Beserra_(s%C3%A9rie_de_entrevistas)" style="color:white; text-decoration:none;">Entrevista com Sr. Beserra</a>
-</div>
-| style=width:100%;max-width:100%;height:100%; background-color:#670292
-}}