使用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);

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

Answer 2

是的，您可以在滑块

SlickGoto()

中使用

ref

方法，我将为您提供我的解决方案之一。

如果您的滑块是可重复使用的组件，例如：

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

在这里，您需要传递

indexToGo

，这是您需要前往的幻灯片的索引，并使用滑块

ref

和

slickGoTo()

方法传递给它

indexToGo

，现在您可以轻松地仅使用您需要前往的幻灯片的索引。