Я пытаюсь добавить карусель в мое приложение Angular 7.Вместо использования карусели Bootstrap 4 мне посоветовали вместо этого использовать карусель ng-bootstrap - найдено здесь
Я запустил npm install --save @ng-bootstrap/ng-bootstrap и добавил код, рекомендованный в этой статье.Как показано ниже:
<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>
TS:
images = [1, 2, 3].map(() => https://picsum.photos/900/500?random&t=${Math.random()});
Кроме того, я добавил в import в app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
imports: [
NgbModule
],
Я установилbootstrap используя npm и добавил его в раздел styles моего angular.json файла.
Теперь появляется следующая карусель:
Как видите, текст не центрирован, и на изображении появляется только одна стрелка.Когда я проверяю элемент, вот где находится другая стрелка:
Если я открою консоль, и экран станет меньшепоявляются стрелки:
Похоже, что стрелки и текст смещены влево, когда экран становится меньше.Может кто-нибудь указать, как это правильно выглядит?Спасибо!