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

Posted 2023-02-25

【中文标题】使用 react-slick 更改当前幻灯片

【英文标题】：Change the current slide with react-slick

【发布时间】：2020-07-23 13:47:28

【问题描述】：

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

你知道这个库是否可以正确地做到这一点？

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

【参考方案1】：

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

this.slider.current.slickGoTo(1);

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