Coding Bootcamp responsive sliders. With Html, CSS and JavaScript.
Design comparison
Solution retrospective
Does anyone know how I can listen to swipe events? So I can make it to respond when a user swipes right or left on mobile.
Community feedback
- @allmtzPosted over 1 year ago
Hello nice job and congrats on finishing the challenge !
To detect a swipe on mobile you could use the
touchstart
andtouchend
events. Check out this Stack Overflow question : https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android.Heres the second answer to detect horizontal swipes :
let touchstartX = 0 let touchendX = 0 function checkDirection() { if (touchendX < touchstartX) alert('swiped left!') if (touchendX > touchstartX) alert('swiped right!') } document.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX }) document.addEventListener('touchend', e => { touchendX = e.changedTouches[0].screenX checkDirection() })
Alternatively, you could look into using a library like Swiper.js: https://github.com/nolimits4web/swiper
Let me know if this helps !
0@chukwudobe-MicahPosted over 1 year ago@ramenDiet thanks for your feedback, this help me. I achieved what I could.😅 Appreciate it, I will be using the library later but I just want to learn how to do it myself since it's my learning stage.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord