In today's web landscape, touch screens are everywhere: phones, tablets, and even laptops. With so many devices relying on touch, it's important for web developers to understand swiping and how to program it into their websites. The key component of this is handling swipe events in JavaScript.
Swipe gestures are super common across the web. Think about how often you swipe left or right to browse photos, scroll through lists, or to manage messages. Knowing how to manage these swipes can make your apps feel smooth and responsive.
Reasons To Study Swiping in JavaScript
Better User Experience: Users expect smooth interactions on their touch devices. By handling swipes well, you make your app easier and more enjoyable to use.
Stay Competitive: Good swiping mechanics on your site can set you apart from other, less experienced developers. If your app feels clunky or outdated on mobile apps, this can make your applications seem clunky and non-optimized.
Unlock Creativity: Knowing how to handle swipes opens up new possibilities for fun and innovative features in your app. It lets you think outside the box and create unique experiences.
In this article, we'll break down how to handle swipe events in JavaScript, helping you build better, more user-friendly apps.
Swipe Events in JavaScript
JavaScript has the ability to handle many events, such as clicking, swiping, scrolling etc. We must utilize these events to make custom swiping functionality.
Here are the swiping events utilized by JavaScript
touchstart: Triggered when the touch starts.
touchmove: Triggered when the touch moves.
touchend: Triggered when the touch ends.
Implementation
Here we will build an example of a swipe-able component in JavaScript
The HTML and CSS
<div class="carousel-container">
<button class="carousel-button left"><</button>
<div class="carousel">
<div class="carousel-item">Item 1</div>
<div class="carousel-item">Item 2</div>
<div class="carousel-item">Item 3</div>
</div>
<button class="carousel-button right">></button>
</div>
<style>
.carousel-container {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel {
display: flex;
transition: transform 0.5s ease-in-out;
padding: 0 32px;
}
.carousel-item {
min-width: calc(100% / 3);
box-sizing: border-box;
}
.carousel-button {
position: absolute;
top: 0;
bottom: 0;
color: #123963;
border: none;
cursor: pointer;
font-size: 38px;
z-index: 5;
background-color: #fff;
}
.carousel-button.left {
left: 0;
}
.carousel-button.right {
right: 0;
}
@media (max-width: 769px) {
.carousel-item {
min-width: 100%;
}
}
</style>
Notice the left/right buttons are absolutely positioned to the left and right. This is because the carousel items will translate left and right, yet we want these buttons to remain in the same spot
The JavaScript (Handling Swipes)
document.addEventListener('DOMContentLoaded', function() {
const carousel = document.querySelector('.carousel');
const leftButton = document.querySelector('.carousel-button.left');
const rightButton = document.querySelector('.carousel-button.right');
let offset = 0;
let startX;
let isSwiping = false;
const itemWidth = carousel.querySelector('.carousel-item').offsetWidth;
carousel.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
isSwiping = true;
});
carousel.addEventListener('touchmove', (e) => {
if (!isSwiping) return;
const currentX = e.touches[0].clientX;
const diffX = startX - currentX;
if (diffX > 50) {
const maxOffset = (carousel.children.length - 1) * itemWidth;
if (offset < maxOffset) {
offset += itemWidth;
carousel.style.transform = `translateX(-${offset}px)`;
}
isSwiping = false;
} else if (diffX < -50) {
if (offset > 0) {
offset -= itemWidth;
carousel.style.transform = `translateX(-${offset}px)`;
}
isSwiping = false;
}
});
carousel.addEventListener('touchend', () => {
isSwiping = false;
});
});
And there you have it! You now have a swipe-able component in your web application! Keep in mind this is easily applicable to other types of swipes with minor tweaks. The main takeaways here should be:
The Events
touchstart: Triggered when the touch starts.
touchmove: Triggered when the touch moves.
touchend : Triggered when the touch ends
Positioning
Hope you learned something!
