【问题标题】:Can I customize Carousel-indicators in react-responsive-carousel我可以在 react-responsive-carousel 中自定义 Carousel-indicators 吗
【发布时间】:2021-12-15 11:01:17
【问题描述】:

我正在使用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>

这些指标的当前形状,

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

【问题讨论】:

    标签: css reactjs responsive-design next.js react-responsive-carousel


    【解决方案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>
    );
    

    【讨论】:

    • 勾选了。我可以与您联系以向您学习吗?我也是reactjs爱好者
    • 如何将点的形状改为线形而不是使用文本?
    • 不客气,我会相应地更新沙盒。
    • 你只能像this sandbox那样自定义.dot css。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-02
    • 2021-06-07
    • 2021-02-21
    • 2020-12-05
    • 2021-05-25
    • 2021-06-19
    • 2018-04-15
    相关资源
    最近更新 更多