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: []

};