반응-매끄러운 회전 목마주기를 슬라이드를 스크롤 이벤트와 - JS 반응, 자바 스크립트

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>