More actions
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
$(function () { | $(function () { | ||
const carousel = document.querySelector('.card-carousel'); | const carousel = document.querySelector('.card-carousel'); | ||
if (!carousel) return; | |||
let isDragging = false; | |||
let startX; | |||
let scrollStart; | |||
carousel.addEventListener("pointerdown", function () { | carousel.addEventListener("pointerdown", function (e) { | ||
isDragging = true; | |||
carousel.classList.add("dragging"); | carousel.classList.add("dragging"); | ||
startX = e.pageX; | |||
scrollStart = carousel.scrollLeft; | |||
carousel.setPointerCapture(e.pointerId); | |||
e.preventDefault(); | |||
}); | |||
carousel.addEventListener("pointermove", function (e) { | |||
if (!isDragging) return; | |||
const x = e.pageX; | |||
const walk = (x - startX) * 1.5; // Adjust scroll speed if desired | |||
carousel.scrollLeft = scrollStart - walk; | |||
e.preventDefault(); | |||
}); | }); | ||
carousel.addEventListener("pointerup", function () { | carousel.addEventListener("pointerup", function () { | ||
isDragging = false; | |||
carousel.classList.remove("dragging"); | |||
}); | |||
carousel.addEventListener("pointerleave", function () { | |||
isDragging = false; | |||
carousel.classList.remove("dragging"); | carousel.classList.remove("dragging"); | ||
}); | }); | ||
}); | }); | ||
}); | }); |
Revision as of 14:51, 30 May 2025
/* Any JavaScript here will be loaded for all users on every page load. */ mw.loader.using('jquery', function () { $(function () { const carousel = document.querySelector('.card-carousel'); if (!carousel) return; let isDragging = false; let startX; let scrollStart; carousel.addEventListener("pointerdown", function (e) { isDragging = true; carousel.classList.add("dragging"); startX = e.pageX; scrollStart = carousel.scrollLeft; carousel.setPointerCapture(e.pointerId); e.preventDefault(); }); carousel.addEventListener("pointermove", function (e) { if (!isDragging) return; const x = e.pageX; const walk = (x - startX) * 1.5; // Adjust scroll speed if desired carousel.scrollLeft = scrollStart - walk; e.preventDefault(); }); carousel.addEventListener("pointerup", function () { isDragging = false; carousel.classList.remove("dragging"); }); carousel.addEventListener("pointerleave", function () { isDragging = false; carousel.classList.remove("dragging"); }); }); });