Ant Design 自定义轮播

问题描述

如何自定义具有以下功能的蚂蚁设计轮播

1. 子弹代替盒子
2. 更改项目符号颜色
3. 项目符号应该在图像容器之外

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

解决方法

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

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

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

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

我只是设计了一些简单的项目符号，但您可以按照自己喜欢的任何方式设计它们，如果您有任何问题，请提问。祝你好运:)