I added slider using react-slick
to my React app. For <Slider>
I added ref, and I’m trying use it to change active slide:
import React, { useRef } from 'react'; import Slider from 'react-slick'; const TestSlider = () => { const handleOnClick = index => { sliderRef.slick('slickGoTo', index); // also try sliderRef.slickGoTo(index); }; <Slider {...settings} ref={sliderRef}> ... </Slider> }
but I got an error:
TypeError: sliderRef.slick is not a function
Why doesn’t this work for me?
“react”: “^16.6.3”,
“react-slick”: “^0.27.12”,
Advertisement
Answer
According to react-slick’s slickGoTo() documentation, you need to pass a function as the ref. Something like:
const handleOnClick = index => { this.slider.slickGoTo(index); }; <Slider {...settings} ref={slider => (this.slider = slider)}> ... </Slider>
If you want to create a ref using the useRef
hook, it would look like:
const sliderRef = useRef(); const handleOnClick = index => { sliderRef.current.slickGoTo(index); }; <Slider {...settings} ref={sliderRef}> ... </Slider>