Swipeable not working on mobile

Hi,

I’m using version 3.2.12 with Gatsby. Unfortunately I could not make swipeable work on mobile. Rarely it works only on first slide, and does nothing on other slides. Tested on mobile Safari and Chrome on an iPhone. emulateTouch works on desktop.

Here is the component:

import React from "react";

// requires a loader
import { Carousel } from "react-responsive-carousel";

const settings = {
  showArrows: false,
  interval: 3500,
  dynamicHeight: false,
  stopOnHover: false,
  infiniteLoop: true,
  showStatus: false,
  transitionTime: 500,
  showThumbs: false,
  showIndicators: true,
  swipeable: true,
  emulateTouch: true,
  autoPlay: true,
};

const TestimonialsCarousel = ({ testimonials }, featured) => (
  <Carousel {...settings}>
    {testimonials
      .filter((item) => (item.featured || !featured) == true)
      .map((item) => (
        <div key={item.quote}>
          <div className="has-text-left has-text-white is-size-6 is-family-secondary px-xxs">
            <blockquote>{item.quote}</blockquote>
          </div>
          <div className="has-text-left has-text-white has-text-weight-medium testimonialauthor pt-small px-xxs">
            <p>—{item.author}</p>
          </div>
        </div>
      ))}
  </Carousel>
);

export default TestimonialsCarousel;

Here is the link to test. Please try to swipe “Quotes” section where testimonials are shown.

I am stuck, and I don’t prefer to switch back to react-slick which has its own problems. Any help is appreciated. Thanks.

[Finesse]

I have the same issue and I’ve found the reason for your and my case. When the second slide is active, the ul.slider element (that listens to the touch events) stays on the left. The blue highlight on the screenshot below is that element:

iOS Safari handles touch events only on the element itself and not on its children. Therefore, when you touch a slide, nothing happens. In fact, you can swipe from the second slide if you start swiping from the very left of the screen.

In order to fix it, you need to make the ul.slider element always stay on the screen. A way to do it is creating a very long ::before block that stays under every slide:

/* Add this CSS to your website */
.slider {
  position: relative;
}
.slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 10000%;
  height: 100%;
}

For some reason Safari watches touch events on the ::before block and not on the child elements. Newertheless, it works.

A proper solution for the library author is attaching the touch event listeners to div.slider-wrapper instead of ul.slider.

[abdullahe]

@Fox4148 I included the component’s css. Not sure if it uses transform (css) or js.

I think it is weird that both carousels (quotes and recognition) is swipeable on only first slide.