I am making an image carousel feature, I have completed the sliding with forwarding and backward buttons with transform property. But now I am facing problems doing it perfectly with mouse events like when the mouse is clicked and dragged to left then making a smooth and user-friendly image carousels. How can I do it?
Here is the example code: – https://jsfiddle.net/dy1vk40f/1/
Any guide provided would be greatly appreciated
function moveable(e) {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - scrollcontainer.offsetLeft;
const style = window.getComputedStyle(scrollcontainer);
const matrix = new WebKitCSSMatrix(style.transform);
const walk = x - startX;
const walktwo = walk * 10;
scrollcontainer.style.userSelect = 'none';
scrollcontainer.style.transform = `translate3d(${matrix.m41 + walk}px, 0px, 0px)`;
startX = e.pageX;
texx.innerHTML = `Tranlate: ${matrix.m41}`;