Swipe Navigation
Implement swipe-to-navigate between slides or tabs using jQuery touch events and CSS transitions.
jQuery
Intermediate
4 min read
Swipe Navigation
Example
const slider = $("#slider");
const slides = slider.children(".slide");
let current = 0;
function goTo(n) {
current = Math.max(0, Math.min(n, slides.length - 1));
slider.css("transform", `translateX(${-current * 100}%)`);
}
let sx;
slider.on("touchstart", e => { sx = e.originalEvent.touches[0].clientX; })
.on("touchend", e => {
const dx = e.originalEvent.changedTouches[0].clientX - sx;
if (dx < -50) goTo(current + 1);
else if (dx > 50) goTo(current - 1);
}); Pro Tip
Add CSS transition: transform 0.3s ease on the slider container for a smooth swipe animation.