angular - Material Design Bootstrap Carousel 出现在 Angular 应用程序中,但不切换图像
问题描述
我正在尝试在我的 Angular 应用程序中使用 Bootstrap Carousel。我在这里复制第一个示例。
轮播按预期显示,没有控制台错误,但第一个图像仍然存在,它永远不会改变。
这是我的 HTML:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg">
</div>
</div>
</div>
我的 angular.json 中有以下内容:
"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
"node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
"./node_modules/quill/dist/quill.core.css",
"./node_modules/quill/dist/quill.snow.css",
"node_modules/animate.css/animate.css",
"src/styles.css"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/hammerjs/hammer.min.js",
"./node_modules/quill/dist/quill.js"
]
有人可以告诉我我错过了什么吗?
解决方案
只需使用轮播组件标签,而不仅仅是 div 和图像。
试试这个代码:
<mdb-carousel [animation]="'slide'">
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg" alt="First slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg" alt="Second slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide">
</mdb-carousel-item>
</mdb-carousel>
推荐阅读
- c# - 服务帐号 - 必须是 G Suite 域用户
- c++ - “运行时多态性或覆盖”如何工作?
- python - Pygame 有时检测不到按键
- java - 如何在 android Java 中使用 GPUImageFilters 编辑色调饱和度和亮度?
- c# - 等待依赖服务时出现 C# TaskCompletionSource 错误
- data-analysis - 用情感程度分析数据
- javascript - 通过时间戳日期的数据库 json 列表设置日期选择器的禁用日期
- tensorflow - Keras 中的输入层是如何定义的?
- javascript - HighCharts - 在组合图表中从最左边开始绘制
- java - 从 Kosaraju 算法构建内核 DAG