我可以在 react-bootstrap 中自定义轮播指示器吗

Posted 2023-02-23

【中文标题】我可以在 react-bootstrap 中自定义轮播指示器吗

【英文标题】：Can I customize Carousel-indicators in react-bootstrap

【发布时间】：2016-04-20 21:27:21

【问题描述】：

我正在使用http://react-bootstrap.github.io/ Carousel 组件。我正在尝试自定义轮播指示器，包括一些文本，并使其看起来像一个带有文本的按钮，但将渲染“ol”标签反应成一个新的 CarouseItem 并且没有重定向功能

    return (
       <Carousel id="sampleSlide" indicators=false>
          <ol className="carousel-indicators">
            <li data-target='#sampleSlide' data-slide-to="0" className="active"></li>
            <li data-target= '#sampleSlide' data-slide-to="1"></li>
          </ol>
          <CarouselItem>
            <div className="itemContent">
               Hello World
            </div>
          </CarouselItem>
          <CarouselItem>
            <div className="itemContent">
               Hello World
            </div>
          </CarouselItem>
      </Carousel>
    );

有什么方法可以自定义它或任何其他方法吗？

【参考方案1】：

您可以使用自定义 CSS/SCSS 更改您的引导轮播指示器

Reactjs 代码：

<div className=classes.my__carousel_main>
          <Carousel>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src=require("../../assets/utf_banner.png")
                  
                />
                <Carousel.Caption>
                  <h3>First slide label</h3>
                  <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </Carousel.Caption>
              </Carousel.Item>
        </Carousel>
</div>

CSS/SCSS 代码：

    .my__carousel_main 
            div
                ol
                    li
                        background-color: red;
                        border-radius: 50%;
                        height: 10px;
                        width: 10px;
                    
                
            
        

谢谢;)