MediaWiki:Common.js: Difference between revisions
Appearance
Cdjensen94 (talk | contribs) No edit summary |
Cdjensen94 (talk | contribs) No edit summary |
||
Line 4: | Line 4: | ||
mw.hook('wikipage.content').add(function($content) { | mw.hook('wikipage.content').add(function($content) { | ||
$content.find('.mw-jsslideshow | $content.find('.mw-jsslideshow').each(function() { | ||
const $slideshow = $( | 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({ | $slideshow.slick({ | ||
infinite: true, | infinite: true, | ||
Line 18: | Line 30: | ||
}); | }); | ||
// | // Fix positioning on resize | ||
$(window).on('resize', function() { | $(window).on('resize', function() { | ||
$slideshow.slick('setPosition'); | $slideshow.slick('setPosition'); |
Revision as of 14:14, 3 March 2025
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');
});
});
});