Horizotal Swipe / Scroll mouse event

[umerjaved178]

I have implemented my slider with react-slick, everything is working fine (https://react-slick.neostack.com/docs/example/multiple-items)

Now I want to add extra functionality that Swiping fingers across the laptop mouse pad will cause Slider Items to move/slide (horizontal scrolling)

You can see the desired functionality at https://www.apple.com/store

I am not able to find this option in documentation, not even on Stackoverflow, can anyone help me with that?

[sxrthxk]

Create a onWheel event on the slider, then hook it to a function that checks the deltaX value of the event. Use this with the slickNext() method provided by react-slick to change slides on horizontal scroll.

[EasyBreezy97]

  const onWheelSlider = debounce((e, ref) => {
    if (!ref.current) return;

    if (e.deltaX > 0) {
      ref.current.slickNext();
    } else if (e.deltaX < 0) {
      ref.current.slickPrev();
    }
  }, 20);

//jsx
   <div onWheel={onWheelSlider}>
     <Slider ref={sliderRef}>
         ...
     </Slider
   </div>