React-slick: feature request: capture & prevent click events from reaching elements within slides, if user swipes

[nihlton]

When the entire slide content is clickable, it becomes impossible to swipe between slides without also triggering the click.

it would be nice if the slider would swallow the click event when it detects the user is swiping between slides.

[laveesingh]

It has been implemented recently. The changes should be released in a day or two.

[akiran]

Released 0.23.0

[Tuizi]

Is there any doc about that? Or a commit version? And when the version 0.23 will be release?

[JeffWeim]

@akiran @laveesingh

Was this fix ever released? it looks like the latest version is only at 0.21.0 (https://github.com/akiran/react-slick/tags). Is this coming in a future release?

Thanks

[akyker20]

I don't think this was ever fixed. I have 0.23.1 and when I swipe, onClick of my slide content is triggered.

[arkolesen]

@akiran @laveesingh
Hi, guys!
Your component is very cool! thanks for it!
Could you help us (@JeffWeim, me, and @akyker20)?
Thanks a lot!

[arkolesen]

@akyker20 Hi!
Have you dealt with it?

[all9lives]

@akiran Did this fix ever get merged in? I looked and couldn't see the changes in 0.23.1, it doesn't look like there's a 0.23.0 release.

[arkolesen]

@all9lives Seems - nope ._.

[arkolesen]

@all9lives I dealt with this by:
Adding toggleDragging={this.toggleDragging} property to Carousel component.
This.toggleDragging:

  toggleDragging = () => this.setState({isDragging: !this.state.isDragging});

and pass flag isDragging={this.state.isDragging} to each element of carousel.

Then add onClickHandler to carousel element:

 onClickHandler = (event) => {
    if (this.props.isDragging) {
      event.preventDefault();
    } else {
      ... your stuff...
    }
  };

and call it as

      <div className="blah blah" onClick={this.onClickHandler}>

Hope it will help you.