I am using the

Is it possible to customize that dots shape indicators?

CodePudding user response：

Yes, you can customize the dots with a JSX passing renderIndicator prop as a function to Carousel component. You can take a look at this sandbox for a live working example of this usage.

<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>
);