MediaWiki:CarouselArrows.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

$(function() {
    var carousel = document.getElementById('collection-carousel');
    var leftArrow = document.getElementById('scroll-left');
    var rightArrow = document.getElementById('scroll-right');

    if (carousel && leftArrow && rightArrow) {
        function updateArrows() {
            var maxScroll = carousel.scrollWidth - carousel.clientWidth;
            
            if (carousel.scrollLeft <= 0) {
                leftArrow.style.opacity = '0';
                leftArrow.style.pointerEvents = 'none';
            } else {
                leftArrow.style.opacity = '1';
                leftArrow.style.pointerEvents = 'auto';
            }

            if (carousel.scrollLeft >= maxScroll - 1) {
                rightArrow.style.opacity = '0';
                rightArrow.style.pointerEvents = 'none';
            } else {
                rightArrow.style.opacity = '1';
                rightArrow.style.pointerEvents = 'auto';
            }
        }

        leftArrow.addEventListener('click', function() {
            carousel.scrollBy({ left: -320, behavior: 'smooth' });
        });
        
        rightArrow.addEventListener('click', function() {
            carousel.scrollBy({ left: 320, behavior: 'smooth' });
        });

        carousel.addEventListener('scroll', updateArrows);
        window.addEventListener('resize', updateArrows);

        setTimeout(updateArrows, 100);
    }
});