Ant 设计定制转盘

Question

如何定制具有以下功能的 ant 设计轮播

1. 子弹而不是盒子
2. 更改子弹颜色
3. 项目符号应位于图像容器之外

沙盒链接https://codesandbox.io/s/trusting-dream-zzjr7?file=/src/App.js

Answer 1

可能有几个解决方案，我将介绍两个。

第一个是简单地为当前按钮覆盖 styles。 我已经为不同的元素尝试过这个，有时可能会有点令人沮丧，但这是可能的。 带点的 ul 具有类名 slick-dots。

我推荐的另一个解决方案是创建自己的点并从轮播中删除标准点。 这可以通过 useRef 钩子轻松实现。 访问转盘的 goTo function。

const App = () => {
  const ref = useRef();

  const goTo = (slide) => {
    ref.current.goTo(slide, false);
  };

  return (
    <div>
      <Carousel ref={ref} afterChange={onChange} dots={false}>
        <div>
          <h3 style={contentStyle}>1</h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
      </Carousel>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <button onClick={() => goTo(0)} style={btnStyle} />
        <button onClick={() => goTo(1)} style={btnStyle} />
        <button onClick={() => goTo(2)} style={btnStyle} />
        <button onClick={() => goTo(3)} style={btnStyle} />
      </div>
    </div>
  );
};

https://codesandbox.io/s/amazing-beaver-4brfo?file=/src/App.js:499-1411

我只是设计了一些简单的子弹，但你可以用任何你喜欢的方式来设计它们，如果你有任何问题，请询问。 祝你好运：）