Comments (8)
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()
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
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.
Related Issues (20)
- Example using `next` HOT 3
- Upgrade to webpack 4 and babel 7 HOT 1
- publish version 0.8.4 to npm public registry HOT 1
- NonPassiveTouchTarget HOT 2
- Add TypeScript types HOT 1
- This is not working in IE11 browser.
- Is there a prop to disable the dragging functionality? HOT 4
- Enable scroll events? HOT 2
- Speed control HOT 1
- NextJS compability HOT 2
- UI configuration for demo site HOT 7
- getCursor()
- Cannot update a component (`RingComponent`) while rendering a different component (`wrappedCard`)
- white screen HOT 1
- Disable / enable the carousel's movement HOT 2
- Support Horizontal Scroll HOT 2
- How to get center Index (cursor) in the beginning? HOT 2
- Issue in using Rolling Carousel example in another app
- Simplify
- Advanced Options required
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-touch-carousel.