MediaWiki:Common.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.

mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js');
mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css', 'text/css');
mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css', 'text/css');

mw.hook('wikipage.content').add(function($content) {
    $content.find('.mw-jsslideshow').each(function() {
        const $slideshowContainer = $(this);
        const $slideshow = $('<div class="slideshow"></div>');

        // Find all images inside mw-jsslideshow, including [[File:]] images
        $slideshowContainer.find('img').each(function() {
            const $img = $(this);
            const $slide = $('<div></div>').append($img.clone()); // Wrap in slide div
            $slideshow.append($slide);
        });

        // Replace old content with the new slick-ready slideshow
        $slideshowContainer.empty().append($slideshow);

        // Initialize slick
        $slideshow.slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
            arrows: true,
            dots: true,
            adaptiveHeight: true
        });

        // Fix positioning on resize
        $(window).on('resize', function() {
            $slideshow.slick('setPosition');
        });
    });
});

$(document).ready(function() {
    var counter = 1;

    $('.slideshow').each(function() {
        var $this = $(this);
        if (!$this.attr('id')) {
            // Assign an auto id if missing
            var newId = 'slideshow-auto-' + (counter++);
            $this.attr('id', newId);

            // Add the missing spacer
            if ($('#' + newId + '-spacer').length === 0) {
                $('<div>')
                    .attr('id', newId + '-spacer')
                    .insertAfter($this);
            }

            // Force JavascriptSlideshow to initialize this slideshow
            startSlideshow(newId);
        }
    });
});