我可以在 react-responsive-carousel 中自定义 Carousel-indicators 吗

Question

我正在使用 react-responsive-carousel 库。在这里，我想将默认指标 CSS、点状更改为线状。我的代码是，

 <CarouselWrapper
      sx={{ marginTop: "124px", maxHeight: "486px", minHeight: "150px" }}
    >
      <Carousel autoPlay infiniteLoop showArrows={false}>
        <div>
          <Image src={image1} />
        </div>
        <div>
          <Image src={image1} />
        </div>
        <div>
          <Image src={image1} />
        </div>
      </Carousel>
    </CarouselWrapper>

这些指标的当前形态，

是否可以自定义点状指示器？

Answer 1

是的，您可以使用 JSX 将 renderIndicator 属性作为函数传递给 Carousel 组件来自定义点。您可以查看 this sandbox 以了解此用法的实际工作示例。

<Carousel
      autoPlay
      infiniteLoop
      showArrows={false}
      renderIndicator={(onClickHandler, isSelected, index, label) => {
        const defStyle = { marginLeft: 20, color: "white", cursor: "pointer" };
        const style = isSelected
          ? { ...defStyle, color: "red" }
          : { ...defStyle };
        return (
          <span
            style={style}
            onClick={onClickHandler}
            onKeyDown={onClickHandler}
            value={index}
            key={index}
            role="button"
            tabIndex={0}
            aria-label={`${label} ${index + 1}`}
          >
            {"cust " + index}
          </span>
        );
      }}
    >
      <div>
        <img src={"1.jpeg"} />
      </div>
      <div>
        <img src={"2.jpeg"} />
      </div>
      <div>
        <img src={"3.jpeg"} />
      </div>
    </Carousel>
);

Answer 2

使用 SCSS 且需要较少定制的解决方案。使用环绕选择器，您可以使用：

  .yourSelector {
    :global(.carousel .control-dots .dot) {
            background-color: blue;
          }
        }

我可以在 react-responsive-carousel 中自定义 Carousel-indicators 吗

Can I customize Carousel-indicators in react-responsive-carousel

css

responsive-design

reactjs

next.js

react-responsive-carousel