MediaWiki:Common.js：修订间差异

2025年5月1日 (四) 19:40的版本

// Wait for document ready
mw.hook('wikipage.content').add(function() {
  // Initialize carousels
  initializeCarousels();
});

function initializeCarousels() {
  // Find all carousel containers
  const carousels = document.querySelectorAll('.modern-carousel');
  
  carousels.forEach(function(carousel) {
    const track = carousel.querySelector('.carousel-track');
    const items = carousel.querySelectorAll('.carousel-item');
    const prevButton = carousel.querySelector('.carousel-button.prev');
    const nextButton = carousel.querySelector('.carousel-button.next');
    let currentIndex = 0;
    
    // Set initial width for track
    track.style.width = `${items.length * 100}%`;
    
    // Function to move to specific slide
    function moveToSlide(index) {
      // Ensure index is within bounds
      if (index < 0) index = items.length - 1;
      if (index >= items.length) index = 0;
      
      currentIndex = index;
      
      // Move track
      track.style.transform = `translateX(-${currentIndex * (100 / items.length)}%)`;
      
      // Update active class
      items.forEach(item => item.classList.remove('active'));
      items[currentIndex].classList.add('active');
    }
    
    // Add hover effect
    items.forEach(function(item, index) {
      item.addEventListener('mouseenter', function() {
        moveToSlide(index);
      });
    });
    
    // Add navigation
    prevButton.addEventListener('click', function() {
      moveToSlide(currentIndex - 1);
    });
    
    nextButton.addEventListener('click', function() {
      moveToSlide(currentIndex + 1);
    });
    
    // Initialize first slide as active
    moveToSlide(0);
    
    // Auto-rotate (optional)
    let autoRotate = setInterval(function() {
      moveToSlide(currentIndex + 1);
    }, 5000);
    
    // Pause auto-rotate on hover
    carousel.addEventListener('mouseenter', function() {
      clearInterval(autoRotate);
    });
    
    // Resume auto-rotate on mouseleave
    carousel.addEventListener('mouseleave', function() {
      autoRotate = setInterval(function() {
        moveToSlide(currentIndex + 1);
      }, 5000);
    });
  });
}