Карусель ng-bootstrap не выглядит правильно в полном окне, но выглядит хорошо на минимуме

я изучаю ng-bootstrap и очень хотел использовать их реализацию карусели. Я обратился к их официальному документу, и пример, который у них есть, работает для половины окна, но не выглядит хорошо в полном окне. Как я могу сделать так, чтобы карусель выглядела хорошо в полном окне?

Я попытался назначить ngb-carousel идентификатор и изменить его отображение на встроенное, но это не сработало.

ссылка (указана ниже) ведет к официальному документу, и если вы нажмете StackBlitz вверху, вы сможете запустить код. (извините, я пытался предоставить ссылку на пример stackBlitz здесь, но он продолжал перенаправлять на домашнюю страницу).

ссылка на официальный документ (я использую код ПЕРВОГО ПРИМЕРА!!!!): https://ng-bootstrap.github.io/#/components/carousel/examples

Вот скопированный код: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdCarouselBasic } from './carousel-basic';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdCarouselBasic],
  exports: [NgbdCarouselBasic],
  bootstrap: [NgbdCarouselBasic]
})
export class NgbdCarouselBasicModule {}

app.component.html

<div class = "container-fluid">

  <hr>

  <p>
    This is a demo example forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
    Visit <a href = "https://ng-bootstrap.github.io/" target = "_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
  </p>

  <hr>

  <ngbd-carousel-basic></ngbd-carousel-basic>
</div>

карусель-basic.html

<ngb-carousel *ngIf = "images">
  <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>

carouselbasic.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {map} from 'rxjs/operators';

@Component({selector: 'ngbd-carousel-basic', templateUrl: './carousel-basic.html'})
export class NgbdCarouselBasic implements OnInit {
  images: Array<string>;

  constructor(private _http: HttpClient) {}

  ngOnInit() {
    this._http.get('https://picsum.photos/list')
        .pipe(map((images: Array<{id: number}>) => this._randomImageUrls(images)))
        .subscribe(images => this.images = images);
  }

  private _randomImageUrls(images: Array<{id: number}>): Array<string> {
    return [1, 2, 3].map(() => {
      const randomId = images[Math.floor(Math.random() * images.length)].id;
      return `https://picsum.photos/900/500?image=${randomId}`;
    });
  }
}

опять же, это (карусель) выглядит хорошо на половине экрана, но совершенно не работает на полном экране (как будто вы не видите стрелку вправо в карусели). Он отзывчивый, но не знаю, что я могу сделать, чтобы он выглядел как карусель в полноэкранном режиме.

В конце концов, я пытаюсь добавить это на свой собственный веб-сайт, и когда я пытаюсь добавить его сейчас, правая часть карусели выглядит совершенно не так (не вижу карусели справа). Я уверен, что если я смогу решить проблему с полноэкранным режимом с помощью карусели, он будет работать на моей странице.

РЕДАКТИРОВАТЬ:------------------------------------------------- Мне не удалось найти это дополнительное поле, но я попытался центрировать ng-carousel, и он сделал так, чтобы левый и правый значки отображались вместе.