Swipeable not working on mobile
See original GitHub issueHi,
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:
- Created 3 years ago
- Reactions:1
- Comments:9
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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: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 oful.slider
.@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.