Question

我正在尝试在Angular 7应用中添加轮播。建议我不要使用Bootstrap 4传送带，而应该使用ng-bootstrap传送带-找到here

我运行了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的{{1}}中添加了

app.module.ts

我使用npm安装了import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ NgbModule ],，并将其添加到我的bootstrap文件的styles部分。

现在，下面的轮播出现了：

如您所见，文本未居中并且图像上仅出现一个箭头。当我检查元素时，这是另一个箭头所在的位置：

如果我打开控制台，并且屏幕变小，则会出现两个箭头：

当屏幕变小时，似乎箭头和文本向左移动。有人可以指出如何使其正确显示吗？谢谢！

Answer 1

您可能没有将<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />添加到index.html

您应该end up with something like this。

Answer 2

我遇到了同样的问题，我的解决方案可能并非在所有情况下都有效，但是在我的情况下，所有图像都是方形的，所以我要做的是：

<ngb-carousel style="width: 350px; height: 350px; padding-left: 16px; padding-right: 16px">
        <ng-template ngbSlide>
                <img [src]="image_path" alt="Random first slide" style="width: 350px; height: 350px; ">
        </ng-template>
</ngb-carousel>

此代码使我的箭头指向正确的位置。为了使箭头更加可见，我要做的就是使用给定的CSS使自定义箭头

.carousel-control-prev-icon{
     background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
     background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}

如何在Angular 7应用中使用ngb-carousel？

2 个答案: