react-slick carousel cycle through slides with scroll-event - react js, javascript

Question

Here is the carousel I am using: react-slick

I want to be able to scroll through each slide using the mouse scroll up or down event.

Scroll up to increment, scroll down to decrement.

Found an example online of exactly what I need - just unsure of how to convert this into a react solution.

Example: https://codepen.io/Grawl/pen/mMLQQb

What would be the best way to achieve this in a "react" component based approach?

Here is my react component:

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.css';
import ReactSVG from 'react-svg';
import Slider from 'react-slick';


import MobileSVG from '../../../assets/svg/icons/Mobile_Icon_Option2.svg';
import TabletSVG from '../../../assets/svg/icons/Tablet_Icon_Option2.svg';
import DesktopSVG from '../../../assets/svg/icons/Desktop_Icon_Option2.svg';

const deviceIcons = {'mobile': MobileSVG, 'tablet': TabletSVG, 'desktop': DesktopSVG};

import BackToTopButton from '../BackToTopButton';

export default class ProductComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };

    }

    render() {
        const {productData} = this.props

        //Slider settings
        const settings = {
            dots: true,
            infinite: false,
            speed: 500,
            fade: true,
            arrows: false,
            centerMode: true,
            slidesToShow: 1,
            slidesToScroll: 1
        }

        //Slider items
        const sliderItems = productData.map((obj, i) => {
            return (
                <div className="product-component row" key={i}>
                    <div className="product-component-image-wrap col-xs-12 col-sm-8">
                        <span className="product-heading">{obj.category}</span>
                        <div className="product-detail-wrap">
                            <img className="product-component-image" src={`${process.env.DB_URL}${obj.image}`} />
                            <ul className="list-device-support">
                                {obj.categoryDeviceSupport.map((obj, i) => {
                                    return (<li key={i}>
                                        <span className="svg-icon">
                                            <ReactSVG path={deviceIcons[obj.value]} />
                                        </span>
                                        <span className="product-label">{obj.label}</span>
                                    </li>)
                                })}
                            </ul>
                        </div>
                    </div>
                    <div className="product-component-info col-xs-12 col-sm-3"> 
                        <span className="align-bottom">{obj.title}</span>
                        <p className="align-bottom">{obj.categoryBrief}</p>
                    </div>
                </div>
            )
        });
        return (
            <div className="product-component-wrap col-xs-12">
                <Slider {...settings}>
                    {sliderItems}
                </Slider>
                <BackToTopButton scrollStepInPx="50" delayInMs="7" />
            </div>
        )
    }
}

ProductComponent.propTypes = {
    productData: PropTypes.array
};

ProductComponent.defaultProps = {
    productData: []
};

Answer 1

I was able to get scrolling to work in a function component that reference the Slider component (react-slick JS library) using hooks (useRef to obtain a reference to the Slider component and useEffect to add and remove a listener (scroll function) to the wheel event).

const myComponent () => {

 const settings = {
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,};

const slider = useRef(null);

function scroll(e){
    if (slider === null)
        return 0;

    e.wheelDelta > 0 ? (
        slider.current.slickNext()
    ) : (
        slider.current.slickPrev()
    );

};

useEffect(() => {
    window.addEventListener("wheel", scroll,true);

    return () => {
        window.removeEventListener("wheel", scroll, true);
    };
}, []);

return (
 <Slider {...settings} ref={slider}>
 </Slider>
);
}

export default myComponent;

Answer 2

With hooks

const sliderRef = createRef();
const scroll = useCallback(
    y => {
      if (y > 0) {
        return sliderRef?.current?.slickNext(); /// ? <- using description below 
      } else {
        return sliderRef?.current?.slickPrev();
      }
    },
    [sliderRef]
  );
 useEffect(() => {
    window.addEventListener("wheel", e => {
      scroll(e.deltaY);
    });
  }, [scroll]);

I used optional chaining from typescript connected with babel plugins, but you can use verification like:

 sliderRef.current && sliderRef.current.slickNext() 

Answer 3

I use the following code in my CustomSlider component:

  constructor(props) {
    super(props);
    this.handleWheel = this.handleWheel.bind(this);
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('wheel', this.handleWheel);
  }

  componentWillUnmount() {
    ReactDOM.findDOMNode(this).removeEventListener('wheel', this.handleWheel);
  }

  handleWheel(e) {
    e.preventDefault();
    e.deltaY > 0 ? this.slider.slickNext() : this.slider.slickPrev();
  }

Component initialization

 <Slider ref={slider => this.slider = slider}>
   ...
 </Slider>

Answer 4

The following should work fine for you:

componentDidMount(){
  let slickListDiv = document.getElementsByClassName('slick-list')[0]
  slickListDiv.addEventListener('wheel', event => {
    event.preventDefault()
    event.deltaY > 0 ? this.slider.slickNext() : this.slider.slickPrev()
  })
}

You should initialize the component like this:

<Slider {...settings} ref={slider => this.slider = slider.innerSlider}>
...
</Slider>

Answer 5

You'd wanna do something like this:

constructor(props){
    super(props);
    this.slide = this.slide.bind(this);
}
slide(y){
    y > 0 ? (
       this.slider.slickNext()
    ) : (
       this.slider.slickPrev()
    )
}
componentWillMount(){
    window.addEventListener('wheel', (e) => {
        this.slide(e.wheelDelta);
    })
}
render(){...

and add a ref to your slider:

<Slider ref={slider => this.slider = slider }>

So when the y value of the wheel event is greater than 0 i.e. scroll up then show next slide, when scrolling down show previous.