Dicionário de Favelas Marielle Franco

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

Predefinição Discussão

Predefinição:CarrousselAvancado (editar)

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

780 bytes adicionados ,  24 de novembro de 2024
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
Linha 1: Linha 1:
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" style="width: 100%;">
<div class="carousel-container">
  <div class="carousel-inner">
  <!-- Slide 1 -->
     {{{Slides}}}
  <div class="carousel-slide active">
    [[File:Imagem1.jpg|center|class=img-fluid|alt=Descrição da Imagem 1|style=width:100%;]]
    <div class="carousel-caption">
      <a href="https://wikifavelas.com.br/Link1" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 1</a>
      <p style="color:white;">Descrição breve do slide 1</p>
     </div>
   </div>
   </div>
  <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>
   <!-- Slide 2 -->
    <span class="visually-hidden">Anterior</span>
   <div class="carousel-slide">
  </button>
     [[File:Imagem2.jpg|center|class=img-fluid|alt=Descrição da Imagem 2|style=width:100%;]]
   <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
     <div class="carousel-caption">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <a href="https://wikifavelas.com.br/Link2" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 2</a>
    <span class="visually-hidden">Próximo</span>
       <p style="color:white;">Descrição breve do slide 2</p>
  </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>
   </div>
   <div class="carousel-item">
 
     [[File:Imagem2.jpg|class=img-fluid|alt=Descrição da Imagem 2|style=width:100%;height:auto;]]
  <!-- Slide 3 -->
     <div class="carousel-caption d-md-block" style="background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px;">
   <div class="carousel-slide">
       <a href="https://exemplo.com/link2" style="color:white; text-decoration:none; font-size: 1.5rem; font-weight: bold;">Título 2</a>
     [[File:Imagem3.jpg|center|class=img-fluid|alt=Descrição da Imagem 3|style=width:100%;]]
       <p style="color:white; font-size:1rem;">Descrição breve do segundo slide</p>
     <div class="carousel-caption">
       <a href="https://wikifavelas.com.br/Link3" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 3</a>
       <p style="color:white;">Descrição breve do slide 3</p>
     </div>
     </div>
   </div>
   </div>
}}
 
</pre>
  <!-- Controles -->
</noinclude>
  <a class="carousel-prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="carousel-next" onclick="plusSlides(1)">&#10095;</a>
</div>
 
<style>
.carousel-container {
  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>
 
<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>
Disponível em “https://homologacao.wikifavelas.com.br/index.php/Especial:MobileDiff/30107”