carousels with slides with images can lose ability to dragEnd about react-touch-carousel HOT 8 CLOSED

We never fully support desktop mouse events. The touchWithMouseHOC is only coded for demo usages.

You may try setting draggable="false" for the images, I'm not sure whether it would help.

If you just want a simple images carousel for desktop without much fancy effects, I suggest you to use some other packages like the ones I mention in README.

from react-touch-carousel.

I had a similar issue,
On mobile: a longpress would break the snapping back to a slide, and dragging was then working just like a scroll.

my Fix:
using the touchWithMouseHOC.js, I added a 'touchend' event listener to the componentDidMount()

touchWithMouseHOC.js

componentDidMount() {
      document.addEventListener("mousemove", this.onDocumentMouseMove);
      document.addEventListener("mouseup", this.onDocumentMouseUp);
      document.addEventListener("touchend", this.onDocumentMouseUp);
      // Listen in the capture phase, so we can prevent the clicks
      document.addEventListener("click", this.onDocumentClick, true);
      window.addEventListener("blur", this.onWindowBlur);
    }

Hope it helps 😄

from react-touch-carousel.

Not quite, draggable is a global attribute as of html 5, part of the Drag & Drop API

MDN - draggable

By default, only text selections, images, and links can be dragged. For all other elements, the event ondragstart must be set for the drag and drop mechanism to work, as shown in this comprehensive example.

My issue was specifically about an image, so inside the renderCard(i, mod) return template I used
<img draggable="false" src={process.env.BACKEND_URL + '/' + item.imageUrl} />

from react-touch-carousel.

draggable="false" totally worked! Thanks for the quick reply.

from react-touch-carousel.

Is there an example of how/where to call the methods provided? #amateurHour

from react-touch-carousel.

made a ref to TouchCarousel with ref={instance => {this.touchCarousel = instance}}
made a function that calls this.touchCarousel.go(index)
the method docs say .go(targetCursor) so I knew I wasn't there yet
for reasons beyond me this.touchCarousel.go(index * -1) solved my issue

from react-touch-carousel.

first of all thank you @bennettstuart your solution helped me for my site :)
but i got another question for @celloworld :) how did you set a draggable property?
have you configured something in the TouchCarousel.js file?

from react-touch-carousel.

Ooo wow.... didnt think about that one :) thank you very much @celloworld :)

from react-touch-carousel.