It need to register a really long swipe in order to change slide position, compare to swipe on touch device is a lot nicer.
I've tried and set swipeScrollTolerance={0} to [0, 10, 10, 800] it doesn't help much.
I've notice swipe will be ok when swipe from first slide to last slide.
Package version
// package.json
"dependencies": {
"@material-ui/core": "4.11.0",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "4.0.0-alpha.56",
"@svgr/webpack": "5.4.0",
"axios": "0.20.0",
"date-fns": "2.16.1",
"dompurify": "2.0.14",
"isomorphic-dompurify": "^0.7.0",
"jsdom": "16.4.0",
"lodash": "4.17.20",
"next": "9.5.3",
"next-seo": "^4.11.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-responsive-carousel": "3.2.9",
"typescript": "4.0.2"
},
Simplify code
import React from 'react';
import { Carousel } from 'react-responsive-carousel';
export default function BlogPage(props) {
return (
<>
<Carousel
emulateTouch
swipeable
showThumbs={false}
infiniteLoop
>
<div style={{ display: 'blog', height: '500px', backgroundColor: 'red'}}>
<h1>a</h1>
</div>
<div style={{ display: 'blog', height: '500px', backgroundColor: 'blue'}}>
<h1>b</h1>
</div>
<div style={{ display: 'blog', height: '500px', backgroundColor: 'green'}}>
<h1>c</h1>
</div>
</Carousel>
</>
);
}
Swipe on touch device

Swipe on non-touch device (Desktop)

Swipe on non-touch device - first to last (Good swipe)

Swipe on non-touch device - middle (Odd swipe)

It need to register a really long swipe in order to change slide position, compare to swipe on touch device is a lot nicer.
I've tried and set
swipeScrollTolerance={0}to [0, 10, 10, 800] it doesn't help much.I've notice swipe will be ok when swipe from first slide to last slide.
Package version
Simplify code
Swipe on touch device
Swipe on non-touch device (Desktop)
Swipe on non-touch device - first to last (Good swipe)
Swipe on non-touch device - middle (Odd swipe)