使用react-slick更改当前幻灯片

Question

我正在使用react-slick库制作一个滑块，我想要更改活动幻灯片和滑块顶部的幻灯片。例如，如果我单击当前页面中的一个按钮，我希望更改滑块顶部的当前幻灯片。

你知道有没有可能用这个库正确地做到这一点？

我在react-slick github (https://github.com/akiran/react-slick/issues/738)上找到了一个解决方案，它包括创建幻灯片的引用和通过this.slider.innerSlider.list.focus()设置焦点。然而，这并不能很好地工作，因为我想要的元素不在滑块的最上面。例如，如果我将焦点设置在倒数第二张幻灯片上，则无法再通过箭头访问列表中的第一个元素。

Answer 1

如果this.slider是对Slick组件的引用，您可以通过使用所需幻灯片的索引调用方法slickGoTo()来强制幻灯片显示幻灯片。例如，要显示第二张幻灯片：

this.slider.current.slickGoTo(1);

有关可以使用ref调用的方法的详细信息，请参阅：react-slick API: Methods。