MediaWiki:Common.js: mudanças entre as edições

De Farmland
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
mw.loader.using('mediawiki.util', function () {
const carousel = document.getElementById('carousel');
const cards = document.querySelectorAll('.card');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');


    const track = document.getElementById('everlightTrack');
let currentIndex = 2; // Começa com o terceiro card centralizado
    if (!track) return;
const cardWidth = cards[0].offsetWidth + 20; // Largura + Gap


     const items = track.children;
// Função para centralizar o card
    let index = 0;
function updateCarousel() {
     let autoScroll;
     carousel.scrollTo({
        left: (currentIndex - 1) * cardWidth,
        behavior: 'smooth'
     });


     function scrollToIndex(i) {
     // Atualizar classe active
         const item = items[i];
    cards.forEach((card, index) => {
         if (!item) return;
         card.classList.remove('active');
 
         if (index === currentIndex) {
        const trackRect = track.getBoundingClientRect();
            card.classList.add('active');
         const itemRect = item.getBoundingClientRect();
         }
    });
}


        const offset =
// Navegação
            item.offsetLeft -
nextBtn.addEventListener('click', () => {
            (trackRect.width / 2) +
    if (currentIndex < cards.length - 1) {
            (itemRect.width / 2);
        currentIndex++;
 
         updateCarousel();
         track.scrollTo({ left: offset, behavior: 'smooth' });
     }
     }
});


     function next() {
prevBtn.addEventListener('click', () => {
         index = (index + 1) % items.length;
     if (currentIndex > 0) {
         scrollToIndex(index);
         currentIndex--;
         updateCarousel();
     }
     }
});


    function prev() {
// Auto Slide (a cada 3 segundos)
        index = (index - 1 + items.length) % items.length;
setInterval(() => {
        scrollToIndex(index);
     if (currentIndex < cards.length - 1) {
    }
         currentIndex++;
 
     } else {
    document.getElementById('everlightNext')?.addEventListener('click', () => {
         currentIndex = 0; // Volta ao início
        stopAuto();
        next();
        startAuto();
     });
 
    document.getElementById('everlightPrev')?.addEventListener('click', () => {
         stopAuto();
        prev();
        startAuto();
     });
 
    function startAuto() {
         autoScroll = setInterval(next, 4000); // 4 segundos
     }
     }
    updateCarousel();
}, 3000);


    function stopAuto() {
// Iniciar centralizado
        clearInterval(autoScroll);
updateCarousel();
    }


    scrollToIndex(index);
<script src="script.js"></script>
    startAuto();
});

Edição das 21h33min de 16 de janeiro de 2026

const carousel = document.getElementById('carousel');
const cards = document.querySelectorAll('.card');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');

let currentIndex = 2; // Começa com o terceiro card centralizado
const cardWidth = cards[0].offsetWidth + 20; // Largura + Gap

// Função para centralizar o card
function updateCarousel() {
    carousel.scrollTo({
        left: (currentIndex - 1) * cardWidth,
        behavior: 'smooth'
    });

    // Atualizar classe active
    cards.forEach((card, index) => {
        card.classList.remove('active');
        if (index === currentIndex) {
            card.classList.add('active');
        }
    });
}

// Navegação
nextBtn.addEventListener('click', () => {
    if (currentIndex < cards.length - 1) {
        currentIndex++;
        updateCarousel();
    }
});

prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
        currentIndex--;
        updateCarousel();
    }
});

// Auto Slide (a cada 3 segundos)
setInterval(() => {
    if (currentIndex < cards.length - 1) {
        currentIndex++;
    } else {
        currentIndex = 0; // Volta ao início
    }
    updateCarousel();
}, 3000);

// Iniciar centralizado
updateCarousel();

<script src="script.js"></script>