|
|
| Linha 1: |
Linha 1: |
| /* =======================================================
| |
| CARROSSEL UNIFICADO - WIKI EVERLIGHT
| |
| ======================================================= */
| |
| mw.loader.using(['jquery', 'mediawiki.util'], function () {
| |
| $(function() {
| |
| const $wrapper = $('.carousel-wrapper');
| |
| const $items = $('.carousel-item');
| |
| const $next = $('.right-btn');
| |
| const $prev = $('.left-btn');
| |
|
| |
| if (!$wrapper.length) return; // Só executa se o carrossel existir na página
| |
|
| |
| let current = 0;
| |
| let autoPlayTimer;
| |
|
| |
| function updateCarousel() {
| |
| // Atualiza a classe ativa para o efeito visual de destaque
| |
| $items.removeClass('active').eq(current).addClass('active');
| |
|
| |
| const activeItem = $items.get(current);
| |
| const scrollPosition =
| |
| activeItem.offsetLeft -
| |
| ($wrapper.width() / 2) +
| |
| ($(activeItem).outerWidth() / 2);
| |
|
| |
| $wrapper.stop().animate({
| |
| scrollLeft: scrollPosition
| |
| }, 500);
| |
| }
| |
|
| |
| // Funções de Navegação
| |
| function moveNext() {
| |
| current = (current + 1) % $items.length;
| |
| updateCarousel();
| |
| }
| |
|
| |
| function movePrev() {
| |
| current = (current - 1 + $items.length) % $items.length;
| |
| updateCarousel();
| |
| }
| |
|
| |
| // Eventos de Clique
| |
| $next.on('click', function() {
| |
| stopAutoPlay();
| |
| moveNext();
| |
| });
| |
|
| |
| $prev.on('click', function() {
| |
| stopAutoPlay();
| |
| movePrev();
| |
| });
| |
|
| |
| // Auto-Play (4 segundos)
| |
| function startAutoPlay() {
| |
| autoPlayTimer = setInterval(moveNext, 4000);
| |
| }
| |
|
| |
| function stopAutoPlay() {
| |
| clearInterval(autoPlayTimer);
| |
| }
| |
|
| |
| // Inicialização
| |
| updateCarousel();
| |
| startAutoPlay();
| |
|
| |
| // Pausa o carrossel se o mouse estiver em cima
| |
| $wrapper.hover(stopAutoPlay, startAutoPlay);
| |
| });
| |
| });
| |
|
| |
| /* Script para o Carrossel da Página Principal */ | | /* Script para o Carrossel da Página Principal */ |
| $(function() { | | $(function() { |
/* Script para o Carrossel da Página Principal */
$(function() {
$('.right-btn').click(function() {
$('.carousel-wrapper').animate({ scrollLeft: '+=250' }, 400);
});
$('.left-btn').click(function() {
$('.carousel-wrapper').animate({ scrollLeft: '-=250' }, 400);
});
});