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

Edição atual tal como às 16h42min de 24 de novembro de 2024

     <a href="https://wikifavelas.com.br/Link1" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 1</a>

Descrição breve do slide 1

     <a href="https://wikifavelas.com.br/Link2" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 2</a>

Descrição breve do slide 2

style=width:100%;

     <a href="https://wikifavelas.com.br/Link3" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 3</a>

Descrição breve do slide 3

 <a class="carousel-prev" onclick="plusSlides(-1)">❮</a>
 <a class="carousel-next" onclick="plusSlides(1)">❯</a>

 position: relative;
 max-width: 100%;
 margin: auto;
 overflow: hidden;

}

.carousel-slide {

 display: none;
 position: relative;
 text-align: center;

}

.carousel-slide.active {

 display: block;

}

.carousel-caption {

 position: absolute;
 bottom: 10%;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(0, 0, 0, 0.6);
 padding: 10px;
 border-radius: 5px;

}

.carousel-prev, .carousel-next {

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 16px;
 margin-top: -22px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 user-select: none;

}

.carousel-prev {

 left: 0;

}

.carousel-next {

 right: 0;

} </style>

 const slides = document.querySelectorAll('.carousel-slide');
 slides.forEach((slide, index) => {
   slide.style.display = (index === n) ? 'block' : 'none';
 });

}

function plusSlides(n) {

 const slides = document.querySelectorAll('.carousel-slide');
 currentSlide = (currentSlide + n + slides.length) % slides.length;
 showSlide(currentSlide);

}

// Inicializar o carrossel document.addEventListener('DOMContentLoaded', () => {

 showSlide(currentSlide);

}); </script>

@@ Linha 1: / Linha 1: @@
-<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" style="width: 100%; max-width: 100%; height: auto; background-color: #670292;">
+<div class="carousel-container">
-   <div class="carousel-inner">
+   <!-- Slide 1 -->
-    <!-- Slide 1 -->
+  <div class="carousel-slide active">
-    <div class="carousel-item active">
+    [[File:Imagem1.jpg|center|class=img-fluid|alt=Descrição da Imagem 1|style=width:100%;]]
-      [[File:{{{Imagem1}}}|center|alt={{{Alt1}}}|class=img-fluid|style=width:100%;height:auto;]]
+    <div class="carousel-caption">
-      <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/Link1" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 1</a>
-        <a href="{{{Link1}}}" style="color:white; text-decoration:none;">{{{Titulo1}}}</a>
+      <p style="color:white;">Descrição breve do slide 1</p>
-      </div>
      </div>
-    <!-- Slide 2 -->
+  </div>
-    <div class="carousel-item">
-      [[File:{{{Imagem2}}}|center|alt={{{Alt2}}}|class=img-fluid|style=width:100%;height:auto;]]
+  <!-- Slide 2 -->
-      <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);">
+  <div class="carousel-slide">
-        <a href="{{{Link2}}}" style="color:white; text-decoration:none;">{{{Titulo2}}}</a>
+    [[File:Imagem2.jpg|center|class=img-fluid|alt=Descrição da Imagem 2|style=width:100%;]]
-      </div>
+    <div class="carousel-caption">
+      <a href="https://wikifavelas.com.br/Link2" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 2</a>
+      <p style="color:white;">Descrição breve do slide 2</p>
      </div>
-    <!-- Slide 3 -->
+  </div>
-    <div class="carousel-item">
-      [[File:{{{Imagem3}}}|center|alt={{{Alt3}}}|class=img-fluid|style=width:100%;height:auto;]]
+  <!-- Slide 3 -->
-      <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);">
+  <div class="carousel-slide">
-        <a href="{{{Link3}}}" style="color:white; text-decoration:none;">{{{Titulo3}}}</a>
+    [[File:Imagem3.jpg|center|class=img-fluid|alt=Descrição da Imagem 3|style=width:100%;]]
-      </div>
+    <div class="carousel-caption">
-    </div>
+      <a href="https://wikifavelas.com.br/Link3" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 3</a>
-    <!-- Slide 4 -->
+      <p style="color:white;">Descrição breve do slide 3</p>
-    <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">
+   <!-- Controles -->
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+   <a class="carousel-prev" onclick="plusSlides(-1)">&#10094;</a>
-    <span class="visually-hidden">Previous</span>
+   <a class="carousel-next" onclick="plusSlides(1)">&#10095;</a>
-  </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>
-<noinclude>
-Esta predefinição exibe um carrossel responsivo com título e link clicável sobre cada slide.
+<style>
-Parâmetros:
+.carousel-container {
-* `Imagem1`, `Imagem2`, etc. - Caminho das imagens.
+  position: relative;
-* `Alt1`, `Alt2`, etc. - Texto alternativo para as imagens.
+  max-width: 100%;
-* `Titulo1`, `Titulo2`, etc. - Títulos exibidos sobre as imagens.
+  margin: auto;
-* `Link1`, `Link2`, etc. - Links clicáveis associados aos títulos.
+  overflow: hidden;
-</noinclude>
+}
+.carousel-slide {
+  display: none;
+  position: relative;
+  text-align: center;
+}
+.carousel-slide.active {
+  display: block;
+}
+.carousel-caption {
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 10px;
+  border-radius: 5px;
+}
+.carousel-prev, .carousel-next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  padding: 16px;
+  margin-top: -22px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  user-select: none;
+}
+.carousel-prev {
+  left: 0;
+}
+.carousel-next {
+  right: 0;
+}
+</style>
+<script>
+let currentSlide = 0;
+function showSlide(n) {
+  const slides = document.querySelectorAll('.carousel-slide');
+  slides.forEach((slide, index) => {
+    slide.style.display = (index === n) ? 'block' : 'none';
+  });
+}
+function plusSlides(n) {
+  const slides = document.querySelectorAll('.carousel-slide');
+  currentSlide = (currentSlide + n + slides.length) % slides.length;
+  showSlide(currentSlide);
+}
+// Inicializar o carrossel
+document.addEventListener('DOMContentLoaded', () => {
+  showSlide(currentSlide);
+});
+</script>