question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swipeable not working on mobile

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:9

github_iconTop GitHub Comments

6reactions
Finessecommented, Jul 28, 2021

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:

Screen Shot 2021-06-28 at 19 29 31

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.

1reaction
abdullahecommented, Mar 31, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-native swipeable gesture not working on android?
Alright so, I found a solution by wrapping the swipeable in a gestureHandlerRootView. import { GestureHandlerRootView, Swipeable } from ...
Read more >
[RESOLVED] Swipeable is not working · Issue #1943 - GitHub
Hi! This looks like a missing GestureHandlerRootView , could you try wrapping your app with it to see it it solves the problem?...
Read more >
Swipeable is not working on android? - React Native
here is my MessagesScreen.js import React from 'react'; import { FlatList, StyleSheet, View} from 'react-native'; import ListItem from '.
Read more >
React Native 'Swipeable Gesture' not working on Android
React Native ' Swipeable Gesture' not working on AndroidPlease do like share and comment if you like the video please do hit like...
Read more >
Swipe Gestures not Working in Android - About React
Solution of Swipe Gestures not Working in Android (React Native). To solve this you just have to add something in your MainActivity.java file....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found