I am currently utilizing ng-bootstrap to implement a carousel into my angular project. Following the example provided at https://ng-bootstrap.github.io/#/components/carousel/examples, I have successfully added a carousel that is positioned in the center of the screen.
However, I am now looking to expand the carousel to occupy the entire width of the screen, rather than just being confined to the middle. How can I achieve this?
I have attempted to modify the carousel by adding a class and adjusting the width as demonstrated below:
component HTML
<ngb-carousel *ngIf="images" class="myclass">
<ng-template ngbSlide>
<img [src]="images[0]" alt="Random first slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[1]" alt="Random second slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[2]" alt="Random third slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</ng-template>
</ngb-carousel>
component css
.myclass{
width: 100%;
}