|
|
| Line 12: |
Line 12: |
| </div> | | </div> |
| </div> | | </div> |
| <script>
| |
| document.addEventListener("DOMContentLoaded", function () {
| |
| const carousel = document.querySelector('.card-carousel');
| |
| let isDown = false;
| |
| let startX;
| |
| let scrollLeft;
| |
|
| |
| carousel.addEventListener('mousedown', (e) => {
| |
| isDown = true;
| |
| carousel.classList.add('dragging');
| |
| startX = e.pageX - carousel.offsetLeft;
| |
| scrollLeft = carousel.scrollLeft;
| |
| });
| |
|
| |
| carousel.addEventListener('mouseleave', () => {
| |
| isDown = false;
| |
| carousel.classList.remove('dragging');
| |
| });
| |
|
| |
| carousel.addEventListener('mouseup', () => {
| |
| isDown = false;
| |
| carousel.classList.remove('dragging');
| |
| });
| |
|
| |
| carousel.addEventListener('mousemove', (e) => {
| |
| if (!isDown) return;
| |
| e.preventDefault();
| |
| const x = e.pageX - carousel.offsetLeft;
| |
| const walk = (x - startX) * 1.5; // scroll speed factor
| |
| carousel.scrollLeft = scrollLeft - walk;
| |
| });
| |
| });
| |
| </script>
| |
