|
|
| 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-item active"> |
| <div class="carousel-inner">
| | [[File:Memoria_viva_alan_brum_entrevista.jpg|class=img-fluid|alt=Entrevista com Alan Brum|style=width:100%;height:auto;]] |
| <!-- Slide 1 -->
| | <div class=" carousel-caption d-none d-md-block" style="position: absolute; bottom: 20px; left: 0; width: 100%; background- color: rgba(0, 0, 0, 0. 5); padding: 10px 20px;"> |
| <div class="carousel-item active"> | | <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; font-size: 1.5rem; font-weight: bold;"> Entrevista com Alan Brum</a> |
| [[File:{{{Imagem1}}}|center|alt={{{Alt1}}}|class=img-fluid|style=width:100%;height:auto;]]
| | </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);"> | | </div> |
| <a href=" {{{Link1}}}" style="color:white; text-decoration:none ;">{{{Titulo1}}}</a> | | |
| </div>
| | <div class="carousel-item"> |
| </div>
| | [[File:Memoria viva entrevista Cleonice.jpg|class=img-fluid|alt=Entrevista com Cleonice Dias|style=width:100%;height:auto;]] |
| <!-- Slide 2 -->
| | <div class=" carousel-caption d-none d-md-block" style="position: absolute; bottom: 20px; left: 0; width: 100%; background- color: rgba(0, 0, 0, 0. 5); padding: 10px 20px;"> |
| <div class="carousel-item">
| | <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; font-size: 1.5rem; font-weight: bold;"> Entrevista com Cleonice Dias</a> |
| [[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> | | </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> |
| <noinclude>
| |
| 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.
| |
| </noinclude>
| |
