|
| 1 | +const slider = document.querySelector(".slider-container"), |
| 2 | + slides = Array.from(document.querySelectorAll(".slide")); |
| 3 | + |
| 4 | +let isDragging = false, |
| 5 | + startPos = 0, |
| 6 | + currentTranslate = 0, |
| 7 | + prevTranslate = 0, |
| 8 | + animationID = 0, |
| 9 | + currentIndex = 0; |
| 10 | + |
| 11 | +// Disable context menu |
| 12 | +window.oncontextmenu = (event) => { |
| 13 | + event.preventDefault(); |
| 14 | + event.stopPropagation(); |
| 15 | + return false; |
| 16 | +}; |
| 17 | + |
| 18 | +const getPositionX = (event) => |
| 19 | + event.type.includes("mouse") ? event.pageX : event.touches[0].clientX; |
| 20 | + |
| 21 | +const setSliderPosition = () => { |
| 22 | + slider.style.transform = `translateX(${currentTranslate}px)`; |
| 23 | +}; |
| 24 | + |
| 25 | +const animation = () => { |
| 26 | + setSliderPosition(); |
| 27 | + if (isDragging) requestAnimationFrame(animation); |
| 28 | +}; |
| 29 | + |
| 30 | +const setPositionByIndex = () => { |
| 31 | + currentTranslate = currentIndex * -window.innerWidth; |
| 32 | + prevTranslate = currentTranslate; |
| 33 | + setSliderPosition(); |
| 34 | +}; |
| 35 | + |
| 36 | +const touchStart = (index) => { |
| 37 | + return (event) => { |
| 38 | + currentIndex = index; |
| 39 | + startPos = getPositionX(event); |
| 40 | + isDragging = true; |
| 41 | + // https://css-tricks.com/using-requestanimationframe/ |
| 42 | + animationID = requestAnimationFrame(animation); |
| 43 | + slider.classList.add("grabbing"); |
| 44 | + }; |
| 45 | +}; |
| 46 | + |
| 47 | +const touchEnd = () => { |
| 48 | + isDragging = false; |
| 49 | + cancelAnimationFrame(animationID); |
| 50 | + const movedBy = currentTranslate - prevTranslate; |
| 51 | + if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1; |
| 52 | + if (movedBy > 100 && currentIndex > 0) currentIndex -= 1; |
| 53 | + setPositionByIndex(); |
| 54 | + slider.classList.remove("grabbing"); |
| 55 | +}; |
| 56 | + |
| 57 | +const touchMove = (event) => { |
| 58 | + if (isDragging) { |
| 59 | + const currentPosition = getPositionX(event); |
| 60 | + currentTranslate = prevTranslate + currentPosition - startPos; |
| 61 | + } |
| 62 | +}; |
| 63 | + |
| 64 | +slides.forEach((slide, index) => { |
| 65 | + const slideImage = slide.querySelector("img"); |
| 66 | + slideImage.addEventListener("dragstart", (e) => e.preventDefault()); |
| 67 | + // Touch events |
| 68 | + slide.addEventListener("touchstart", touchStart(index)); |
| 69 | + slide.addEventListener("touchend", touchEnd); |
| 70 | + slide.addEventListener("touchmove", touchMove); |
| 71 | + // Mouse events |
| 72 | + slide.addEventListener("mousedown", touchStart(index)); |
| 73 | + slide.addEventListener("mouseup", touchEnd); |
| 74 | + slide.addEventListener("mouseleave", touchEnd); |
| 75 | + slide.addEventListener("mousemove", touchMove); |
| 76 | +}); |
0 commit comments