MediaWiki:Common.js

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione Ctrl-F5.

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>

document.addEventListener('DOMContentLoaded', function () {
  const carousels = document.querySelectorAll('.everlight-carousel');

  carousels.forEach(carousel => {
    const wrapper = carousel.querySelector('.carousel-wrapper');
    const cards = carousel.querySelectorAll('.card');
    const nextBtn = carousel.querySelector('.right-btn');
    const prevBtn = carousel.querySelector('.left-btn');

    let currentIndex = 0;
    const cardWidth = cards[0].offsetWidth + 20;

    function updateCarousel() {
      wrapper.scrollTo({
        left: currentIndex * cardWidth,
        behavior: 'smooth'
      });

      cards.forEach((card, index) => {
        card.classList.toggle('active', index === currentIndex);
      });
    }

    nextBtn.addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % cards.length;
      updateCarousel();
    });

    prevBtn.addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + cards.length) % cards.length;
      updateCarousel();
    });

    setInterval(() => {
      currentIndex = (currentIndex + 1) % cards.length;
      updateCarousel();
    }, 4000);

    updateCarousel();
  });
});