How to add swipe gesture to slideshow

Store Design
, , , , , , , , , , , , , , ,
1

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

2

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();
  });
});