I have created react carousal from pnp controls, I was looking for help to style next and previous buttons and is there any way to add dots for the slides

[![enter image description here](https://i.stack.imgur.com/iOR3l.png)](https://i.stack.imgur.com/iOR3l.png)

**My Carousal Code**

```
public render(): React.ReactElement<IHomePageCarouselProps> {
    return (
      <div className={styles.carousel}>
              <Carousel
                buttonsLocation={CarouselButtonsLocation.bottom}
                buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
                isInfinite={true}
                element={this.state.carouselElements}
                    />
            </div>
    );
  }

```

**React props and states**

```
constructor(props: IHomePageCarouselProps) {
    super(props)

    this.state = {
      carouselElements: [
        <div key="1" >
          <div >
            <a href="#">
              <img src={banner_1} alt="banner" className={[styles['rounded-top'], styles['img-responsive']].join(' ')} />
            </a>
            <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
              <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
                News title will show here. News title will show here. News title will show
                here. News title will show here. News title will show here. News title will
                show here. News title will show here. News title will show here.
                </span>
            </div>
          </div>
        </div>,
        <div key="2" >
          <div >
            <a href="#">
              <img src={banner_1} alt="banner" className={[styles['rounded-top'], styles['img-responsive']].join(' ')} />
            </a>
            <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
              <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
                News title will show here. News title will show here. News title will show
                here. News title will show here. News title will show here. News title will
                show here. News title will show here. News title will show here.
              </span>
            </div>
          </div>
        </div>
      ]
    }

```

My Carousal Output

[![enter image description here](https://i.stack.imgur.com/yG5lu.png)](https://i.stack.imgur.com/yG5lu.png)

Reason I am asking as my navigation buttons are not align and I want to add dots to know how many slides are there