admin管理员组文章数量:1291089
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: []
};
5 Answers
Reset to default 8You'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;
本文标签：
版权声明：本文标题：reactjs - react-slick carousel cycle through slides with scroll-event - react js, javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739854163a2199810.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论