如何在Angular 7应用程序中使用ngb转盘？

我正在尝试将旋转木马添加到我的Angular 7应用程序中。 有人建议我使用ng引导旋转木马，而不是使用引导4旋转木马

我运行了

npm安装--save@ng bootstrap/ng bootstrap

，并添加了本文建议的代码。如下所示：

第一张幻灯片标签
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

第二张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

第三张幻灯片标签
这是一个伟大的共产主义者

TS:

images=[1,2,3].map（（）=>https://picsum.photos/900/500?random&t=${Math.random（）}）；

另外，我在

app.module.ts

中添加了

import

：

从'@ng bootstrap/ng bootstrap'导入{NgbModule}；
进口：[
NGB模块
],

我使用npm安装了

bootstrap

，并将其添加到我的

angular.json

文件的

style

部分

现在，将出现下面的旋转木马：

如您所见，文本没有居中&图像上只显示一个箭头。 当我检查元件时，这是另一个箭头的位置：

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

---

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

您可能没有将

添加到index.html

---

您应该这样做。

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

<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>

---

控制台上有错误吗？您好@wentjun，控制台上没有出现错误。您是否在@NgModule导入中导入了NgbModule？如果是这样，那么我认为是您的CSS。你真的包含了默认boostrap包中的样式吗？好的，你缺少引导css，我建议你通过npm安装并将其添加到angular.jsonTanks中。对于你的答案，我通过npm安装了bootstrap，并将其添加到我的

angular.json

中&现在出现了一个旋转木马。但是，我在旋转木马上面的HTML显示不正确。只显示左侧导航按钮，图像被切断。你能帮我完成stackblitz，进行更改以重现你的问题吗？我已经这样做了，我仍然收到同样的问题。当我在浏览器中这样打开stackblitz时，控制台似乎会将箭头和文本“推”到左侧：同样的问题正在发生。

图像上的最大宽度：100%

将为您解决此问题。。。stackBlitz也随之更新。

.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')
}