More actions
No edit summary |
No edit summary |
||
Line 3: | Line 3: | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
const | const carousel = document.querySelector('.card-carousel'); | ||
let isDragging = false; | |||
let startX; | |||
let scrollStart; | |||
carousel.addEventListener('mousedown', (e) => { | |||
isDragging = true; | |||
carousel.classList.add('dragging'); | |||
startX = e.pageX; | |||
scrollStart = carousel.scrollLeft; | |||
e.preventDefault(); // <- Important to block text selection | |||
}); | |||
document.addEventListener('mouseup', () => { | |||
isDragging = false; | |||
carousel.classList.remove('dragging'); | |||
}); | |||
document.addEventListener('mousemove', (e) => { | |||
if (!isDragging) return; | |||
const x = e.pageX; | |||
const walk = (x - startX) * 1.5; | |||
carousel.scrollLeft = scrollStart - walk; | |||
e.preventDefault(); | |||
}); | }); | ||
}); | }); |
Revision as of 14:42, 30 May 2025
/* Any JavaScript here will be loaded for all users on every page load. */ document.addEventListener("DOMContentLoaded", function () { const carousel = document.querySelector('.card-carousel'); let isDragging = false; let startX; let scrollStart; carousel.addEventListener('mousedown', (e) => { isDragging = true; carousel.classList.add('dragging'); startX = e.pageX; scrollStart = carousel.scrollLeft; e.preventDefault(); // <- Important to block text selection }); document.addEventListener('mouseup', () => { isDragging = false; carousel.classList.remove('dragging'); }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const x = e.pageX; const walk = (x - startX) * 1.5; carousel.scrollLeft = scrollStart - walk; e.preventDefault(); }); });