Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m |
m |
||
| (303 revisões intermediárias por 3 usuários não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
<div | <div id="fc-carousel" style="position:relative; max-width:700px; margin:16px auto; border-radius:8px; overflow:hidden; background:#1a1a2e;"> | ||
<div id="fc-label" style="text-align:center; padding:8px 40px; color:#fff; font-weight:bold; font-size:14px;"></div> | |||
<div | <div id="fc-track" style="display:flex; transition:transform 0.4s ease;"> | ||
<!--slides are injected by JS--> | |||
</div> | </div> | ||
<div id="fc-prev" style="position:absolute; top:50%; left:8px; transform:translateY(-50%); width:32px; height:32px; background:rgba(0,0,0,0.6); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; user-select:none;" role="button" tabindex="0"> | |||
<span style="color:#fff; font-size:18px; line-height:1;">❮</span> | |||
<div | |||
</div> | </div> | ||
<div id="fc-next" style="position:absolute; top:50%; right:8px; transform:translateY(-50%); width:32px; height:32px; background:rgba(0,0,0,0.6); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; user-select:none;" role="button" tabindex="0"> | |||
<span style="color:#fff; font-size:18px; line-height:1;">❯</span> | |||
<div | |||
</div> | </div> | ||
</div> | |||
<script> | |||
(function() { | |||
var slides = []; | |||
var raw = [ | |||
{ img: "{{{img1|}}}", label: "{{{label1|}}}" }, | |||
{ img: "{{{img2|}}}", label: "{{{label2|}}}" }, | |||
{ img: "{{{img3|}}}", label: "{{{label3|}}}" }, | |||
{ img: "{{{img4|}}}", label: "{{{label4|}}}" }, | |||
{ img: "{{{img5|}}}", label: "{{{label5|}}}" }, | |||
{ img: "{{{img6|}}}", label: "{{{label6|}}}" }, | |||
{ img: "{{{img7|}}}", label: "{{{label7|}}}" }, | |||
{ img: "{{{img8|}}}", label: "{{{label8|}}}" } | |||
]; | |||
< | 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++) { | ||
display: block; | 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> | |||
</ | |||
Edição atual tal como às 23h10min de 16 de março de 2026
❮
❯
<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>