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

Predefinição:CarrousselAvancado (editar)

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

983 bytes removidos , 24 de novembro de 2024

sem sumário de edição

Isabel Xavier

Administradores da interface, Administradores (Semantic MediaWiki), Editores (Semantic MediaWiki), Administradores

352

edições

@@ Linha 1: / Linha 1: @@
-{{#bootstrap_carousel: [[File:DSC02201_363.jpg|300px]] | [[File:DSC02180_363.jpg|300px]] | [[File:DSC02166_363.jpg|300px]] | style=width:300px; }}
+<div id="carouselAvancado" class="carousel slide" data-bs-ride="carousel" style="width:100%; max-width:100%;">
+  <div class="carousel-inner">
-{{CarrousselAvancado
+     {{{Slides}}}
-| Slides =
-  <div class="carousel-item active">
-    [[File:DSC02201_363.jpg|class=img-fluid|alt=Primeiro Slide|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://example.com" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título do Slide 1</a>
-      <p style="color:white; font-size:1rem;">Descrição breve do primeiro slide</p>
-     </div>
    </div>
-   <div class="carousel-item">
+   <!-- Botões de navegação -->
-    [[File:DSC02180_363.jpg|class=img-fluid|alt=Segundo Slide|style=width:100%;height:auto;]]
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselAvancado" data-bs-slide="prev">
-     <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
+     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <a href="https://example.com" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título do Slide 2</a>
+    <span class="visually-hidden">Anterior</span>
-      <p style="color:white; font-size:1rem;">Descrição breve do segundo slide</p>
+   </button>
-    </div>
+   <button class="carousel-control-next" type="button" data-bs-target="#carouselAvancado" data-bs-slide="next">
-   </div>
+     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-   <div class="carousel-item">
+    <span class="visually-hidden">Próximo</span>
-    [[File:DSC02166_363.jpg|class=img-fluid|alt=Terceiro Slide|style=width:100%;height:auto;]]
+  </button>
-     <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
+</div>
-      <a href="https://example.com" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título do Slide 3</a>
-      <p style="color:white; font-size:1rem;">Descrição breve do terceiro slide</p>
-    </div>
-  </div>
-}}