Provide a way to handle slide click and cancel it if mouse is moving

Describe the feature you’d like:

Today, when I’m implement click on slide of this slider. The click is fired when my users slide left or right the carousel. I would like the Slide onClick to be cancel if the user is sliding or best, I would like a way to know when my user is sliding in my child component.

Suggested implementation:

Put what I understand is the var I’m looking for isBeingMouseDragged (in Slider.jsx) in the Context Provider so I can use it in my component with useContext() :

import { SliderContext } from 'pure-react-carousel';

const InnerSlide : React.FC<{ id: string }> = ({ id }) => {
  const { isUserMouseMoving } = useContext(SliderContext);

  const handleClick = useCallback((e) => {
    if (isUserMouseMoving) { e.preventDefault(); return; }

    // handle the click with props id
  }, [isUserMouseMoving, id]); 

  return <div className="inner" onClick={handleClick}> my super inner slide {id}</div>;
};

Describe alternatives you’ve considered:

Add a listener on mouse move, mouse down, mouse up on the whole slider and do it myself. I found it sad as I think it is already done in the pure-react-carousel code.

[azurekca]

Hi, is this issue still being investigated? I am having problems with this as well. I’m using a carousel to display a bunch of products and clicking on a product takes me to the product description. However, I don’t want to navigate away from the page if the carousel is being scrolled.

I see in this commit that stopPropagation was taken out of handleOnClickCapture in Slider.jsx. How about adding another Slider prop to ask developers if they would like to stop event propagation?

[thomasleduc]

Totally agree @mrbinky3000. It was a quick launch, and to be honest we have it on the backlog but did not find a correct way to refactor it. Put the click on the slider would certainly work, even if it is really a shame to have to retrieve the slide clicked and compute a special function for it.