Slick: Slider not swiping on image elements on mobile

[seangeng]

Slick slider dragging and swiping works for me fine on desktop, but not on mobile devices.

====================================================================

Check out the slider here on mobile:
https://www.smokecartel.com/

====================================================================

Steps to reproduce the problem

1. Load https://www.smokecartel.com/ on a mobile browser (Chrome iOS 11)
2. Swipe banners left or right
3. Dynamic div element banner works fine, but an image element inside an does not swipe

====================================================================

What is the expected behaviour?

Slide should swipe to next slide

====================================================================

What is observed behaviour?

Nothing happens.

====================================================================

More Details

My code is:
`featured.slick({
dots: true,
infinite: true,
speed: 500,
adaptiveHeight: false,
draggable: true,
swipe: true,
autoplay: true,
verticalSwiping: false,
autoplaySpeed: 5000,
cssEase: 'linear',
nextArrow: '',
prevArrow: '',
});

$('.slick-slide').bind('touchstart', function(){ console.log('touchstart') });`

Tried debugging with touchstart, but the touchstart event does not event does not trigger.

[kvlknctk]

I have this problem too

[Ricro]

I also have this problem whereas I am using slick for a long time and never had this issue before.

This works perfectly on desktop but as soon as I am enabling touch device in devtool, the slider doesn't slide anymore. On android devices neither.

Adding $('.slick-slide').bind('touchstart', function(){ console.log('touchstart') }) in my console does indeed trigger the touchstart event

[Ricro]

I found a workaround that works for me :

var xCoordStart,
    yCoordStart,
    xSlideTrigger = 10,
    slickElement = $(".slick-slider")

slickElement.bind('touchstart', function (e){
  xCoordStart = e.originalEvent.touches[0].clientX;
  yCoordStart = e.originalEvent.touches[0].clientY;
});

slickElement.bind('touchend', function (e){
  var xCoordEnd = e.originalEvent.changedTouches[0].clientX;
  var yCoordEnd = e.originalEvent.changedTouches[0].clientY;

  var deltaX = Math.abs(xCoordEnd - xCoordStart)
  var deltaY = Math.abs(yCoordEnd - yCoordStart)

  if(deltaX > deltaY){  // prevent slide while scrolling vertically
    if(xCoordStart > xCoordEnd + xSlideTrigger){
      slickElement.slick('slickNext');
    }
    else if(xCoordStart < xCoordEnd + xSlideTrigger){
      slickElement.slick('slickPrev');
    }
  }

});

[tmsss]

I confirm the same bug. I have two slides on the same page but the one with the images is the only one that doesn't swipe on mobile. Taking on @Ricro answer, what worked for me was this:

      var xStart, xEnd;
      slickElement = $("#slideshow");

      slickElement
        .on("mousedown touchstart", function (e) {
          if (e.originalEvent.pageX) {
            xStart = e.originalEvent.pageX;
          } else {
            xStart = e.originalEvent.touches[0].pageX;
          }
        })
        .on("mousemove touchmove", function (e) {
          if (e.originalEvent.pageX) {
            xEnd = e.originalEvent.pageX;
          } else {
            xEnd = e.originalEvent.touches[0].pageX;
          }
        })
        .on("mouseup touchend", function (e) {
          var deltaX = xEnd - xStart;

          if (deltaX < 0) {
            slickElement.slick("slickNext");
          } else {
            slickElement.slick("slickPrev");
          }
        });