Coding Bootcamp responsive sliders. With Html, CSS and JavaScript.

Community feedback

• 

  P

  Allan Martinez•200

  @allmtzPosted almost 2 years ago

  Hello nice job and congrats on finishing the challenge !

  To detect a swipe on mobile you could use the touchstart and touchend 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 Micah Chinedu•700

  @chukwudobe-MicahPosted almost 2 years 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