CODEWITHSUNDEEP
javascriptreactjscomponentscarouselreact-bootstrap
maxluk12
maxluk12

Reputation: 111

Can I customize Carousel-indicators in react-bootstrap

I'm using http://react-bootstrap.github.io/ Carousel component. I am trying to customize the carousel-indicators including some texts, and make it look like a button with text, but react render 'ol' tag into a new CarouseItem and no redirect function

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

Is there any way to customize it or any other method to do so?

Upvotes: 11

Views: 14930

Answers (5)

Ikenna
Ikenna

Reputation: 1

Simply make use of the "indicatorLabels" name and add values to the array to represent each indicator. This adds an aria-label property to the individual indicators, i.e. indicatorLabels = {[ "btn1", "btn2" ]}. In this case, I'm assuming the carousel has two slides.

Visit https://react-bootstrap.github.io/components/carousel/ to read up on names, their types, and default values.

Then in CSS:

[aria-label] {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50%;
}

Upvotes: 0

Fakhar Abbas
Fakhar Abbas

Reputation: 49

This is how I manage to customize:

.carousel-indicators button {
  width: 0.4rem !important;
  height: 0.4rem !important;
  border-radius: 50%;
}

.carousel-indicators button:not(:first-child) {
  margin-left: 0.5rem;
}

.carousel-indicators .active {
  background-color: #ff7a54;
}

Upvotes: 0

lsr
lsr

Reputation: 324

I customized them this way:

.carousel-indicators [data-bs-target] {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
}

.carousel-control-prev-icon {

    background-image: url("./../../images/play.svg") !important;
    transform: scaleX(-1);

}

.carousel-control-next-icon {

    background-image: url("./../../images/play.svg") !important;

}

Add !important otherwise it won't override the default styling.

Upvotes: 1

Siddharth Sogani
Siddharth Sogani

Reputation: 349

This is how I customized it:

.carousel-indicators li {
border-top: unset;
width: 10px;
border-bottom: unset;
border: 1px solid transparent;
border-left-width: 0;
border-right-width: 0;
border-radius: 10px;
background-color: rgba(169, 29, 42, 0.4);
height: 10px;
width: 20px;}                                                  
                                                               
.carousel-indicators .active {
border-top: unset;
border-bottom: unset;
border: 1px solid transparent;
border-left-width: 0;
border-right-width: 0;
border-radius: 10px;
background-color: #A91D2A;
height: 10px;
width: 50px}

Upvotes: 1

Arshad
Arshad

Reputation: 343

You can change your Bootstrap carousel Indicator with customized CSS/SCSS

Reactjs code:

<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 code: 

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

Thank You ;)

Upvotes: 9

Related Questions