1

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.

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
Eloi
  • 86
  • 1
  • 2
  • 11

1 Answers1

4

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.

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42