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 12h15min de 24 de novembro de 2024

328 bytes removidos ,  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 class="carousel-item">
{{#bootstrap_carousel:
  <img src="..." alt="...">
| [[File:Memoria_viva_alan_brum_entrevista.jpg|center|alt=Entrevista com Alan Brum|class=img-fluid|style=width:100%;height:auto;]]
  <div class="carousel-caption d-none d-md-block">
<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);">
    <h5>...</h5>
  <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>
    <p>...</p>
  </div>
</div>
</div>
 
| [[File:Memoria viva entrevista Cleonice.jpg|center|alt=Entrevista com Cleonice Dias|class=img-fluid|style=width:100%;height:auto;]]
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" style="width: 100%; max-width: 800px; margin: 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);">
  <div class="carousel-inner">
  <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>
    <!-- Slide 1 -->
    <div class="carousel-item active">
      [[File:Imagem1.jpg|class=img-fluid|alt=Descrição da Imagem 1|style=object-fit:cover;width:100%;height:auto;]]
      <div class="carousel-caption d-none d-md-block">
        <h5 style="font-size: 1.5em;">Título da Imagem 1</h5>
        <p><a href="Link_da_Imagem_1" style="color: #fff; text-decoration: none;">Texto clicável ou descrição</a></p>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="carousel-item">
      [[File:Imagem2.jpg|class=img-fluid|alt=Descrição da Imagem 2|style=object-fit:cover;width:100%;height:auto;]]
      <div class="carousel-caption d-none d-md-block">
        <h5 style="font-size: 1.5em;">Título da Imagem 2</h5>
        <p><a href="Link_da_Imagem_2" style="color: #fff; text-decoration: none;">Texto clicável ou descrição</a></p>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="carousel-item">
      [[File:Imagem3.jpg|class=img-fluid|alt=Descrição da Imagem 3|style=object-fit:cover;width:100%;height:auto;]]
      <div class="carousel-caption d-none d-md-block">
        <h5 style="font-size: 1.5em;">Título da Imagem 3</h5>
        <p><a href="Link_da_Imagem_3" style="color: #fff; text-decoration: none;">Texto clicável ou descrição</a></p>
      </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>
</div>
 
| [[File:Memoria viva entrevista itamar.jpg|center|alt=Entrevista com Itamar Silva|class=img-fluid|style=width:100%;height:auto;]]
<div class="clearfix"></div>
<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_-_Itamar_Silva_(s%C3%A9rie_de_entrevistas)" style="color:white; text-decoration:none;">Entrevista com Itamar Silva</a>
<noinclude>
</div>
Esta predefinição cria um carrossel com imagens, títulos e textos clicáveis usando Bootstrap.
| [[File:Memoria viva entrevista seu beserra.jpg|center|alt=Entrevista com Sr. Beserra|class=img-fluid|style=width:100%;height:auto;]]
Parâmetros:
<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);">
* `Imagem1`, `Titulo1`, `Texto1`, `Link1` - Configuração para o primeiro slide.
  <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>
* `Imagem2`, `Titulo2`, `Texto2`, `Link2` - Configuração para o segundo slide.
</div>
* (Adicione mais slides conforme necessário).
| style=width:100%;max-width:100%;height:100%; background-color:#670292
* Tá responsivel, galera :)
}}
</noinclude>
Disponível em “https://homologacao.wikifavelas.com.br/index.php/Especial:MobileDiff/30085”