如何实现react-slick仅点击Slider圆点时显示Popover？

问题原因 #

afterChange、beforeChange事件会在所有slide切换场景触发（滑动、箭头点击、自动播放等），无法区分是否是点击分页圆点导致的切换，所以无法精准控制Popover的显示时机。

解决方案：自定义分页器组件 #

通过自定义分页圆点的点击事件，直接绑定Popover的显示逻辑，仅在点击圆点时触发。

步骤1：实现自定义分页逻辑 #

import { useState, useRef } from "react";
import Slider from "react-slick";
import Popover from "@mui/material/Popover"; // 可替换为你项目使用的Popover组件
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const SliderWithDotPopover = () => {
  const [popoverOpen, setPopoverOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const sliderRef = useRef(null);

  // 关闭Popover
  const closePopover = () => {
    setPopoverOpen(false);
  };

  const sliderConfig = {
    dots: false, // 关闭默认分页器
    customPaging: (index) => (
      <button
        className="slick-dot"
        onClick={(e) => {
          // 切换到目标slide
          sliderRef.current?.slickGoTo(index);
          // 触发Popover显示
          setPopoverOpen(true);
          setAnchorEl(e.currentTarget);
        }}
      />
    ),
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <div className="slider-wrapper">
      <Slider ref={sliderRef} {...sliderConfig}>
        <div className="slide-item">Slide 1</div>
        <div className="slide-item">Slide 2</div>
        <div className="slide-item">Slide 3</div>
      </Slider>

      <Popover
        open={popoverOpen}
        anchorEl={anchorEl}
        onClose={closePopover}
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
        transformOrigin={{ vertical: "bottom", horizontal: "center" }}
      >
        <div className="popover-content">
          <p>点击分页圆点后展示的内容</p>
        </div>
      </Popover>
    </div>
  );
};

export default SliderWithDotPopover;

步骤2：匹配默认分页样式（可选） #

添加CSS让自定义圆点和react-slick默认样式一致：

.slick-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  margin: 0 4px;
  cursor: pointer;
}

.slick-dot:focus {
  outline: none;
}

.slider-wrapper .slick-dots li.slick-active .slick-dot {
  background: #333;
}

核心逻辑说明 #

• 关闭默认分页器，通过customPaging完全自定义分页圆点的点击行为
• 用sliderRef调用slickGoTo方法，保证slide切换功能和默认分页器一致
• 仅在点击分页圆点时触发Popover打开操作，彻底区分滑动、箭头点击等其他切换场景

内容的提问来源于stack exchange，提问作者Tannu Jha