Reputation: 108
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.
Do you know if is it possible to do this properly with this library?
I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus()
. However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.
Upvotes: 2
Views: 16323
Reputation: 11
Yes, you can use SlickGoto()
method in slider ref
and I will give you one of my solutions for this.
if your slider is a reusable component for example:
import Slider from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
function CustomSlider({ children, indexToGo }) {
const settings = {
dots: false,
infinite: true,
speed: 400,
slidesToShow: 1,
slidesToScroll: 1,
}
return (
<Slider
{...settings}
ref={slider => {
slider?.slickGoTo(indexToGo)
}}>
{children}
</Slider>
)
}
export default CustomSlider
here you need to pass the indexToGo
which is the index of the slide you need to go and using slider ref
with slickGoTo()
method passing to it the indexToGo
, now you easily can go to any slider using only the index of the slide you need to go.
Upvotes: 1
Reputation: 7355
If this.slider
is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo()
with the index of the desired slide. For example, to show the second slide:
this.slider.current.slickGoTo(1);
For details on the methods that you can call using your ref, see: react-slick API: Methods.
Upvotes: 5