How to add swipe gesture to slideshow

[CreatorTim]

Heey, how can I add a feature to my slideshow section so that when someone swipes left/right on mobile, it switches to the next image?

Like when you're swiping through Instagram stories — I want the same kind of swipe gesture to switch to the next slide.

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy
(Just scroll all the way down to find the slideshow section)

Thanks a lot,
Tim

[Small_Task_Help · Accepted solution]

Hi,

Hope this will help

- Add Hammer.js to Your Theme
- Find Your Slideshow Section Code
- Add an ID to Your Slideshow Container
- Add Swipe Script and include it in theme
Script example

document.addEventListener("DOMContentLoaded", function () {
  var slideshow = document.getElementById('mobile-swipe-slideshow');
  
  if (!slideshow) return;

  var hammer = new Hammer(slideshow);

  hammer.on("swipeleft", function () {
    document.querySelector('.slideshow__button--next').click();
  });

  hammer.on("swiperight", function () {
    document.querySelector('.slideshow__button--prev').click();
  });
});