Skip to content

Swipe on non-touch device is a bit weird #517

Description

@pipech

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

slide2

Swipe on non-touch device (Desktop)

slide

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

slide-non-touch-good

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

slide-non-touch-bad

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions