Проблема в данном коде заключается в том, что при каждом движении мыши слайдер сдвигается на 5 пикселей (влево или вправо), в результате чего возникает дергание.
Чтобы сделать слайдер более плавным, можно изменить эту логику и сдвигать его на количество пикселей, на которое переместился курсор мыши между событиями "mousedown" и "mousemove". Для этого можно сохранить начальное положение курсора мыши в переменную в обработчике "mousedown" и вычислить смещение в обработчике "mousemove".
Исправленный код будет выглядеть следующим образом:
let startX = null;
let current = 0;
const onMouseDown = (evt) => {
startX = evt.pageX;
};
const onMouseMove = (evt) => {
if (startX !== null) {
const diff = startX - evt.pageX;
current += diff;
startX = evt.pageX;
menuList.style.transform = `translateX(${current}px)`;
}
};
const onMouseUp = () => {
startX = null;
};
menuList.addEventListener('mousedown', onMouseDown);
menuList.addEventListener('mousemove', onMouseMove);
menuList.addEventListener('mouseup', onMouseUp);
menuList.addEventListener('mouseleave', onMouseUp);
Здесь мы сохраняем начальное положение курсора мыши в переменную startX в обработчике "mousedown", затем в обработчике "mousemove" вычисляем смещение diff и увеличиваем переменную current на это значение. Затем мы обновляем положение слайдера, используя свойство transform и передавая значение переменной current.
В обработчике "mouseup" и "mouseleave" мы сбрасываем переменную startX до значения null, чтобы прекратить перемещение слайдера, когда пользователь отпускает кнопку мыши или уводит курсор мыши за пределы слайдера.
Надеюсь помог, удачи!