impossible to customize react-bootstrap carousel with dot

I am using the carousel from react-bootstrap it works fine for me but the only things I can not customized are:

arrows
indicator lines

I just want to change the arrow color from white transparency to orange and I looking to replace the lines by dots.

        <Carousel className="home-slider">
          {
            LIST.map((classitem) => 
              <Carousel.Item className="home-slider-item">
                  <img
                    className="slider-item"
                    src={classitem.classpic[0]}
                    alt="Slide"
                  />
                  <Carousel.Caption className="slider-item-content">
                    <h3>{classitem.title}</h3>
                    <p>{classitem.desc}</p>
                    <div className="slider-button">
                    <BlueButton link_href={`/classdetails?id=${classitem.id}`} text="Discover" />         
                    </div>
                    </Carousel.Caption>
                </Carousel.Item>
              )            
          }
      </Carousel>

the css is :

.home-slider {
    width: 70%;
    margin-left: 20%;
    margin-right: 10%;
}

.home-slider h3{
    font-size: 24px;
    color: white;
    text-align: left;
    font-family: Fredoka One;
}

.home-slider p{
    font-size: 16px;
    color: white;
    font-weight: normal;
    text-align: left;
    font-family: Source Sans Pro;
}

.slider-item {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    object-fit: cover;
}

.slider-item-content {
    margin-bottom: 40px;
    border-radius: 20px;
    background-color: #ff725590;
    padding: 10px 10px 10px 10px;
}

.slider-button {
    text-align: left;
    margin-top: 50px;;
}

This is what I have:

Any idea on how to change lines to dots and change the color of arrows?

Thanks

Solution

Using owl carousel its the best choice, It supports almost every browser with lots of options i suggest OwlC than BS sliders. some examples:

`https://codepen.io/tag/owl%20carousel/`