title: react-slick carousel cycle through slides with scroll-event - react js, javascript
body: <p>Here is the carousel I am using: <a href="https://github.com/akiran/react-slick" rel="nofollow noreferrer">react-slick</a></p>
  
  <p>I want to be able to scroll through each slide using the mouse scroll up or down event. </p>
  
  <p>Scroll up to increment, scroll down to decrement. </p>
  
  <p>Found an example online of exactly what I need - just unsure of how to convert this into a react solution.</p>
  
  <p>Example: <a href="https://codepen.io/Grawl/pen/mMLQQb" rel="nofollow noreferrer">https://codepen.io/Grawl/pen/mMLQQb</a></p>
  
  <p>What would be the best way to achieve this in a "react" component based approach? </p>
  
  <p>Here is my react component: </p>
  
  <pre><code>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) =&gt; {
              return (
                  &lt;div className="product-component row" key={i}&gt;
                      &lt;div className="product-component-image-wrap col-xs-12 col-sm-8"&gt;
                          &lt;span className="product-heading"&gt;{obj.category}&lt;/span&gt;
                          &lt;div className="product-detail-wrap"&gt;
                              &lt;img className="product-component-image" src={`${process.env.DB_URL}${obj.image}`} /&gt;
                              &lt;ul className="list-device-support"&gt;
                                  {obj.categoryDeviceSupport.map((obj, i) =&gt; {
                                      return (&lt;li key={i}&gt;
                                          &lt;span className="svg-icon"&gt;
                                              &lt;ReactSVG path={deviceIcons[obj.value]} /&gt;
                                          &lt;/span&gt;
                                          &lt;span className="product-label"&gt;{obj.label}&lt;/span&gt;
                                      &lt;/li&gt;)
                                  })}
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="product-component-info col-xs-12 col-sm-3"&gt; 
                          &lt;span className="align-bottom"&gt;{obj.title}&lt;/span&gt;
                          &lt;p className="align-bottom"&gt;{obj.categoryBrief}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          });
          return (
              &lt;div className="product-component-wrap col-xs-12"&gt;
                  &lt;Slider {...settings}&gt;
                      {sliderItems}
                  &lt;/Slider&gt;
                  &lt;BackToTopButton scrollStepInPx="50" delayInMs="7" /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  ProductComponent.propTypes = {
      productData: PropTypes.array
  };
  
  ProductComponent.defaultProps = {
      productData: []
  };
  </code></pre>