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 class="jcarousel-wrapper">
+<div class="carousel-container">
-<div class="jcarousel jcarousel-randomize">
+  <!-- Slide 1 -->
-    <div class="jcarousel-list">
+  <div class="carousel-slide active">
-        <div class="jcarousel-item">
+    [[File:Imagem1.jpg|center|class=img-fluid|alt=Descrição da Imagem 1|style=width:100%;]]
-{{banner|direction=right|width=50%|title=Perth|section=Destination of the Month|section-link=Previous Destinations of the month|image=PerthBanner1.jpg|quote=Maybe the most isolated world city still has a cosmopolitan vibe and features beaches, wineries and as well as cute quokkas on Rottnest Island.}}
+    <div class="carousel-caption">
-        </div>
+      <a href="https://wikifavelas.com.br/Link1" style="color:white; font-weight:bold; text-decoration:none;">Título do Slide 1</a>
-        <div class="jcarousel-item">
+      <p style="color:white;">Descrição breve do slide 1</p>
-{{banner|direction=right|width=35%|title=Presidente Prudente|section=Off the Beaten Path|section-link=Previously Off the beaten path|image=PresidentePrudenteBanner1.jpg|quote=Named after a president, this regional town has plenty of green spaces and interesting events around the year. }}
-        </div>
-        <div class="jcarousel-item">
-{{banner|direction=left|width=45%|title=Western food in Asia|section=Featured Travel Topic|section-link=Previous Featured travel topics|image=WesternFoodInAsiaBanner1.jpg|quote=What's a Maharaja Mac, Shanghai-style borscht or "soy sauce Western food"? Check out this article for an unusual culinary tour around Asia! }}
-        </div>
      </div>
+  </div>
+  <!-- Slide 2 -->
+  <div class="carousel-slide">
+    [[File:Imagem2.jpg|center|class=img-fluid|alt=Descrição da Imagem 2|style=width:100%;]]
+    <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>
+  </div>
+  <!-- Slide 3 -->
+  <div class="carousel-slide">
+    [[File:Imagem3.jpg|center|class=img-fluid|alt=Descrição da Imagem 3|style=width:100%;]]
+    <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>
+  <!-- Controles -->
+  <a class="carousel-prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="carousel-next" onclick="plusSlides(1)">&#10095;</a>
 </div>
-<span class="jcarousel-control-prev">[[#|&lsaquo;]]</span>
-<span class="jcarousel-control-next">[[#|&rsaquo;]]</span>
+<style>
-<p class="jcarousel-pagination"></p>
+.carousel-container {
-</div>
+  position: relative;
-{{Bottomboxes
+  max-width: 100%;
-|title1=[[Discover]]
+  margin: auto;
-|content1={{discover}}
+  overflow: hidden;
-|title2=<!-- Featured events -->
+}
-|content2=<!-- Wikivoyage:Featured events -->
-|title3=[[Wikivoyage:Plunge forward |'''Get involved''']]
+.carousel-slide {
-|content3=[[File:Be bold2.svg|125px|right]]
+  display: none;
-*<span class="plainlinks>[https://en.wikivoyage.org/w/index.php?title=Wikivoyage:Arrivals_lounge&action=edit&section=new New to Wikivoyage and have a question? Post it here!]</span>
+  position: relative;
-*[[Wikivoyage:How to edit a page|How to edit a page]]
+  text-align: center;
-*[[Wikivoyage:Tips for new contributors|Tips on contributing]]
+}
-*[[Wikivoyage:Community portal|Community portal]]
-*[[Wikivoyage:Policies|Policies]]
+.carousel-slide.active {
-*[[Wikivoyage:Expeditions|Expeditions]]
+  display: block;
-*[[Wikivoyage:Requested articles|Requested articles]]
+}
-*[[Wikivoyage:Travellers' pub|Travellers' pub]] <!-- The Featured Collaboration is commented out as there is no active Featured Collaboration:
-*[[Wikivoyage:Featured collaboration|Featured collaboration]]-->
+.carousel-caption {
-}}
+  position: absolute;
-{{WikivoyageSister}}
+  bottom: 10%;
-<div class="nomobile">{{wikivoyagelang}}</div>
+  left: 50%;
-<div class="nomobile" margin-top:-1em;">&nbsp;</div>
+  transform: translateX(-50%);
-<div style="float:right;">[[Main Page/Photo credits|<span style="color:var( --color-subtle, gray)">photo credits</span>]]</div>
+  background-color: rgba(0, 0, 0, 0.6);
-{{Title-Index page}}
+  padding: 10px;
-__NOEDITSECTION____NOTOC__
+  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>