React Slick双滑块：自定义导航按钮切换索引的实现方法

要实现点击自定义按钮让两个通过asNavFor关联的滑块跳转到指定索引，核心是拿到两个滑块的实例引用，调用其内置的slickGoTo方法。以下是具体实现步骤和代码示例：

核心步骤 #

• 为两个滑块创建React引用（ref），用于获取滑块实例
• 定义跳转函数，接收目标索引，调用滑块实例的slickGoTo方法
• 给自定义按钮绑定点击事件，传入对应索引触发跳转

完整代码示例（函数组件） #

import React, { useRef } from 'react';
import Slider from 'react-slick';
// 导入slick样式文件
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function LinkedSliders() {
  // 创建两个滑块的ref
  const mainSliderRef = useRef(null);
  const navSliderRef = useRef(null);

  // 处理跳转的函数
  const goToSlide = (targetIndex) => {
    // 调用主滑块的slickGoTo，关联的导航滑块会自动同步
    if (mainSliderRef.current) {
      mainSliderRef.current.slickGoTo(targetIndex);
    }
  };

  // 主滑块配置
  const mainSliderOpts = {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    // 关联导航滑块的ref
    asNavFor: navSliderRef
  };

  // 导航滑块配置
  const navSliderOpts = {
    slidesToShow: 3,
    slidesToScroll: 1,
    // 关联主滑块的ref
    asNavFor: mainSliderRef,
    centerMode: true,
    focusOnSelect: true,
    arrows: false
  };

  return (
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      {/* 主内容滑块 */}
      <Slider ref={mainSliderRef} {...mainSliderOpts}>
        <div style={{ padding: '2rem', background: '#f0f0f0' }}>
          <h2>主滑块内容 1</h2>
        </div>
        <div style={{ padding: '2rem', background: '#e0e0e0' }}>
          <h2>主滑块内容 2</h2>
        </div>
        <div style={{ padding: '2rem', background: '#d0d0d0' }}>
          <h2>主滑块内容 3</h2>
        </div>
        <div style={{ padding: '2rem', background: '#c0c0c0' }}>
          <h2>主滑块内容 4</h2>
        </div>
      </Slider>

      {/* 自定义导航按钮组 */}
      <div style={{ display: 'flex', gap: '1rem', margin: '1rem 0' }}>
        <button onClick={() => goToSlide(0)}>跳转到第1页</button>
        <button onClick={() => goToSlide(1)}>跳转到第2页</button>
        <button onClick={() => goToSlide(2)}>跳转到第3页</button>
        <button onClick={() => goToSlide(3)}>跳转到第4页</button>
      </div>

      {/* 关联的导航滑块（可选） */}
      <Slider ref={navSliderRef} {...navSliderOpts}>
        <div style={{ padding: '1rem', background: '#f0f0f0' }}>导航项1</div>
        <div style={{ padding: '1rem', background: '#e0e0e0' }}>导航项2</div>
        <div style={{ padding: '1rem', background: '#d0d0d0' }}>导航项3</div>
        <div style={{ padding: '1rem', background: '#c0c0c0' }}>导航项4</div>
      </Slider>
    </div>
  );
}

export default LinkedSliders;

关键细节说明 #

• ref的使用：必须通过useRef（函数组件）或createRef（类组件）获取滑块实例，才能调用slickGoTo方法
• asNavFor配置：直接传入对方的ref对象即可，react-slick会自动处理实例关联，调用任意一个滑块的slickGoTo，另一个会同步跳转
• 类组件适配：如果用类组件，只需把useRef换成React.createRef()，在跳转函数中用this.mainSliderRef.current.slickGoTo(index)调用即可
• 依赖安装：确保已经安装依赖包：npm install react-slick slick-carousel

内容的提问来源于stack exchange，提问作者Ricardo Carneiro