Im implementing easy swipe occasions with
touchstartand
touchend it
s working tremendous on Androis however on IOS 13, 14, 15 it`s registering swipes provided that you make them sluggish. Right here is my js code perhaps you may spot my difficulty or now sollution.
const carousel_wrapper = doc.querySelector(".carousel");
const carousel = doc.querySelector(".wheel-container");
const slides = doc.querySelectorAll(".slide");
const controlLinks = doc.querySelectorAll(".controls-container a");
let touchStartY = 0;
let accumulatedDeltaY = 0;
let threshold = 0;
perform updateCarousel(deltaY, threshold) {
accumulatedDeltaY += deltaY;
// Verify if the collected delta exceeds the brink
Math.abs(accumulatedDeltaY) >= threshold
? (() => {
const currentIndex = getCurrentIndex();
// Calculate the goal slide based mostly on scroll path
const targetIndex = calculateTargetIndex(currentIndex);
// Replace carousel rotation and lively slides
rotateCarousel(targetIndex);
activeSlideChanger(targetIndex);
// Reset the collected delta
accumulatedDeltaY = 0;
})()
: null;
}
// Get present lively component index
perform getCurrentIndex() {
return Array.from(controlLinks).findIndex((management) =>
management.classList.incorporates("lively")
);
}
perform calculateTargetIndex(currentIndex) {
const scrollDirection = Math.signal(accumulatedDeltaY);
return scrollDirection > 0
? Math.min(currentIndex + 1, controlLinks.size - 1)
: Math.max(currentIndex - 1, 0);
}
// Rotate carousele
perform rotateCarousel(targetIndex) {
const rotationAngle = targetIndex * 90;
carousel.type.rework = `rotate(${rotationAngle}deg)`;
slides.forEach((slide, slideIndex) => {
const slideRotation = -rotationAngle;
slide.type.rework = `rotate(${slideRotation}deg)`;
});
}
// Change lively slide
perform activeSlideChanger(targetIndex) {
doc.querySelector(".slide.lively").classList.take away("lively");
const activeSlide = doc.querySelector(
`.slide:nth-child(${controlLinks[targetIndex].dataset.index})`
);
activeSlide.classList.add("lively");
doc.querySelector("a.lively").classList.take away("lively");
controlLinks[targetIndex].classList.add("lively");
}
// Add management on wheel scroll (desktop)
carousel_wrapper.addEventListener("wheel", (occasion) => {
const deltaY = occasion.deltaY;
threshold = 200;
updateCarousel(deltaY, threshold);
});
//Add management on contact begin (cell)
doc.addEventListener("touchstart", perform (occasion) {
threshold = 0;
touchStartY = occasion.touches[0].clientY;
accumulatedDeltaY = 0;
}, false);
// Add management on contact finish (cell)
doc.addEventListener("touchend", perform (occasion) {
const touchEndY = occasion.changedTouches[0].clientY;
const deltaY = touchEndY - touchStartY;
updateCarousel(-deltaY, threshold);
}, false);
Tried including stuff like: html { touch-action: manipulation; }
and another options, however nothing appears to work for me.