Могу ли я настроить индикаторы карусели в react-bootstrap

Я использую компонент http://react-bootstrap.github.io/ Карусель. Я пытаюсь настроить индикаторы карусели, включая некоторые тексты, и сделать их похожими на кнопку с текстом, но реагировать на рендеринг тега 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>
    );

Есть ли способ настроить его или какой-либо другой способ сделать это?


reactjs javascript carousel components react-bootstrap
person maxluk12    schedule 15.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете изменить индикатор карусели Bootstrap с помощью настраиваемого CSS / SCSS

Код Reactjs:

<div className={classes.my__carousel_main}>
          <Carousel>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src={require("../../assets/utf_banner.png")}
                  alt="First slide"
                />
                <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;
                    }
                }
            }
        }

Спасибо ;)

person Arshad    schedule 19.06.2020