反応スリックカルーセルサイクルをスクロールイベントでスライドを - JSを反応させ、ここではjavascriptの

Question

は、私が使用していカルーセルです：react-slick

を私はマウスのスクロールアップまたはダウンイベントを使用して、各スライドをスクロールできるようにしたいです。

スクロールしてインクリメントし、スクロールダウンしてデクリメントします。

私は必要なものをオンラインで見つけました。反応液に変換する方法は不明です。

例：https://codepen.io/Grawl/pen/mMLQQb

「反応する」コンポーネントベースのアプローチでこれを達成するための最良の方法だろうか？

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

あなたがしたいと思います。このような何か：

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

をし、あなたのスライダーに参照を追加します。だから、

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

ここ

コンポーネントが私に反応されますホイールイベントのy値が0より大きい、すなわちスクロールアップしてから次のスライドを表示する。

Answer 2

次はあなたのために正常に動作する必要があります：

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

あなたは、このようなコンポーネントを初期化する必要があります。まず

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