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:

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

Here is my react ponent:

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-ponent row" key={i}>
                    <div className="product-ponent-image-wrap col-xs-12 col-sm-8">
                        <span className="product-heading">{obj.category}</span>
                        <div className="product-detail-wrap">
                            <img className="product-ponent-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-ponent-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-ponent-wrap col-xs-12">
                <Slider {...settings}>
                    {sliderItems}
                </Slider>
                <BackToTopButton scrollStepInPx="50" delayInMs="7" />
            </div>
        )
    }
}

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

ProductComponent.defaultProps = {
    productData: []
};

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" ponent based approach?

Here is my react ponent:

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-ponent row" key={i}>
                    <div className="product-ponent-image-wrap col-xs-12 col-sm-8">
                        <span className="product-heading">{obj.category}</span>
                        <div className="product-detail-wrap">
                            <img className="product-ponent-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-ponent-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-ponent-wrap col-xs-12">
                <Slider {...settings}>
                    {sliderItems}
                </Slider>
                <BackToTopButton scrollStepInPx="50" delayInMs="7" />
            </div>
        )
    }
}

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

ProductComponent.defaultProps = {
    productData: []
};

• javascript
• reactjs
• react-slick

5 Answers 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()
    )
}
ponentWillMount(){
    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.

The following should work fine for you:

ponentDidMount(){
  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 ponent like this:

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

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() 

I use the following code in my CustomSlider ponent:

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

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

  ponentWillUnmount() {
    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>

I was able to get scrolling to work in a function ponent that reference the Slider ponent (react-slick JS library) using hooks (useRef to obtain a reference to the Slider ponent 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;