Widget:Teste

   ❮

   ❯

<script> (function() {

 var slides = [];
 var raw = [
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" }
 ];

 for (var i = 0; i < raw.length; i++) {
   if (raw[i].img && raw[i].img.length > 0) {
     slides.push(raw[i]);
   }
 }

 if (slides.length === 0) return;

 var current = 0;
 var interval = 3000;
 var timer = null;
 var paused = false;

 var carousel = document.getElementById('fc-carousel');
 var track = document.getElementById('fc-track');
 var label = document.getElementById('fc-label');
 var prevBtn = document.getElementById('fc-prev');
 var nextBtn = document.getElementById('fc-next');

 function getFileUrl(filename) {
   var base = mw && mw.config ? mw.config.get('wgScript') : '/index.php';
   return base + '?title=Especial:FilePath/' + encodeURIComponent(filename);
 }

 for (var i = 0; i < slides.length; i++) {
   var div = document.createElement('div');
   div.style.cssText = 'flex:0 0 100%; text-align:center; padding:4px; box-sizing:border-box;';
   var img = document.createElement('img');
   img.src = getFileUrl(slides[i].img);
   img.style.cssText = 'max-width:100%; height:auto; display:block; margin:0 auto; border-radius:4px;';
   img.alt = slides[i].label || ;
   div.appendChild(img);
   track.appendChild(div);
 }

 function goTo(index) {
   if (index < 0) index = slides.length - 1;
   if (index >= slides.length) index = 0;
   current = index;
   track.style.transform = 'translateX(-' + (current * 100) + '%)';
   label.textContent = slides[current].label || ;
 }

 function startTimer() {
   stopTimer();
   timer = setInterval(function() {
     if (!paused) goTo(current + 1);
   }, interval);
 }

 function stopTimer() {
   if (timer) { clearInterval(timer); timer = null; }
 }

 prevBtn.addEventListener('click', function() { goTo(current - 1); startTimer(); });
 nextBtn.addEventListener('click', function() { goTo(current + 1); startTimer(); });

 carousel.addEventListener('mouseenter', function() { paused = true; });
 carousel.addEventListener('mouseleave', function() { paused = false; });

 goTo(0);
 startTimer();

})(); </script>