swipe not working on iPhone running iOS 10

[embj69]

short description of the bug / issue, provide more detail below. The carousel works on all platforms and devices. The only exception is the swipe on an iPhone running iOS 10. QAed the carousel on an iPhone running iOS 9.2 and the swipe works.

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

no code added since the issue is device and OS specific

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

Steps to reproduce the problem On an iPhone running iOS 10:

1. Go to site and page
2. Swipe carousel, but arrows works

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

What is the expected behaviour?

The swipe function moves the carousel left or right.

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

What is observed behaviour?

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

More Details

• Which browsers/versions does it happen on?
• Which jQuery/Slick version are you using?
• Did this work before?

[kenwheeler]

Are you getting errors in your console? I just tried the slick homepage on ios10 and had no problem. Does http://kenwheeler.github.io/slick work for you?

[embj69]

I am not getting any errors on the console either on load or when I click to next or previous.

And yes, the site works.

[embj69]

Attaching the code that is encountering the issue. carousel.txt

Just did a test via Xcode Simulator running iOS 10.2, I am replicating the issue on attached page--the demos on your site are working.

[maayansavir]

I have the same problem. the slick carousel swipe works in all devices but on Iphone with IOS 10 is not. did you manage to resolve the problem?

[ghost]

Has there been any further insight on what the cause of this might be? I'm also experiencing the same issue on a project of mine. The samples work fine but for some reason my implementation doesn't. Works great on all other devices though which is very confusing.

[maxinacube]

I have a hacky fix for the time being.

I did some debugging in the plugin's JS with no luck - tried logging the event attached to touchstart.slick mousedown.slick or just log in general in the swipeHandler function to see if & where the function fails but no logs came through.

My next step was trying to make sure iOS was seeing touchstart events with slick-slides in general.

I added the following line of JS after my script block initializing Slick. The event is recognized and this line actually makes swiping on iOS work - can't say I know why it helps things along though.

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

[eschie]

@maxinacube Same. Demos work for me just not on my site. Also, setting any kind of event handler on touchstart event causes the slider to work again.

Also noticing that iOS for iphone is recording a mouseevent most of the time while ipad registers proper touchevent. Sometimes the a touchstart event is fired on first swipe and the slider DOES scroll, but after panning the page (and the address bar expands) I can no longer swipe, as iOS only registers mouse events.

[TheGitPanda]

@maxinacube perfect fix for now. Even adding return true; inside the touchstart event.

At first I thought it was because I hadn't initialised slick inside $(document).ready but that's not the case either.

[alexandrecanuto]

I can't scroll vertically on iOS 10.1.1, when I reach the section of the page that has the slider. There's a padding of 15px on each side, and the only way I can scroll past this section is by touching on that space, outside de slider itself.

@maxinacube fix doesn't work for me, in this case.

[ozaark]

This may be related - on iOS 10 the slider stops working properly if there are css animations applied to .slick-track. In my case I had applied an animation to .slick-track once the page was fully loaded and it worked properly in all browsers/devices except iOS 10 Safari & Chrome (worked fine on iOS 6-9 as well).

Removing the css animation from .slick-track fixed the issue for me.

[JSeifBY]

This may be due to the .slick-list element (it does not take all the content height) You can try this :

.slick-list{
  overflow: hidden;
}
.slick-list:after{
  clear: both;
  content: "";
  display: block;
}

[muniir-gopaul]

@JSeifBY, works perfectly fine with your solution and can keep only the :after. Also issue exist on iOS11.

[SabriRh]

Thnx @JSeifBY , works like a charm :)

[sunwha]

@JSeifBY it works. Thank you so much!

[omaracrystal]

I had the same issue ... what solved it for me though was taking out some custom css. The margin style from the slick-slider itself specifically. What was happening was that the partial slick-slider item was not accessible since the slick-list had the custom style overflow: visible along with a set margin on the slick-list. The config settings value for slidesToShow was set to whole numbers (ie: slidesToShow: 3), however the look of the slick-list was 3.5 (due to the custom margins). When I took out the margins then added in the faction numbers for slidesToShow (achieving the same look ie: slidesToShow: 3.5) this fixed the problem.

[sagive]

For anyone facing this issue... I had pointer-events: none;

on .slick-list in a desktop version which i set as pointer-events: unset;

that solved my problem.

[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 here, 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");
      }
    }); 

[SeryogaGitHub]

.slick-track{ display: flex; }