Custom Styles

const slider = document.querySelector('.slider'); let isDragging = false; let startPos = 0; let currentTranslate = 0; let prevTranslate = 0; let animationID = 0; let currentIndex = 0; slider.addEventListener('mousedown', dragStart); slider.addEventListener('touchstart', dragStart); slider.addEventListener('mouseup', dragEnd); slider.addEventListener('touchend', dragEnd); slider.addEventListener('mouseleave', dragEnd); slider.addEventListener('mousemove', dragMove); slider.addEventListener('touchmove', dragMove); function dragStart(event) { if (event.type === 'touchstart') { startPos = event.touches[0].clientX; } else { startPos = event.clientX; } isDragging = true; animationID = requestAnimationFrame(animation); slider.style.cursor = 'grabbing'; } function dragMove(event) { if (isDragging) { let currentPosition; if (event.type === 'touchmove') { currentPosition = event.touches[0].clientX; } else { currentPosition = event.clientX; } currentTranslate = prevTranslate + currentPosition - startPos; } } function dragEnd() { isDragging = false; cancelAnimationFrame(animationID); const threshold = window.innerWidth / 5; if (Math.abs(currentTranslate - prevTranslate) > threshold) { if (currentTranslate < prevTranslate) { currentIndex++; } else { currentIndex--; } } setPositionByIndex(); slider.style.cursor = 'grab'; } function animation() { setSliderPosition(); if (isDragging) requestAnimationFrame(animation); } function setSliderPosition() { slider.style.transform = `translateX(${currentTranslate}px)`; } function setPositionByIndex() { currentTranslate = currentIndex * -window.innerWidth; prevTranslate = currentTranslate; setSliderPosition(); }