Angular 中的轮播
我们将介绍 angular-responsive-carousel 以及如何使用它创建轮播。
Angular 中的轮播
如今，轮播是网站开发人员在网站中使用的最流行的设计元素。轮播以视觉上吸引人的方式立即向最终用户展示信息。
Angular 材质轮播显示一个或多个图像。通过单击按钮或从一帧滑动到另一帧，这些图像会自动旋转或手动旋转。
而且，这些轮播可以在主页或任何其他页面上创建为水平和垂直方向。
为什么使用 Angular 轮播
许多公司（如 Ali Express、Amazon 和许多其他公司）都使用 Angular 轮播。
很容易引起用户的注意，因为这些横幅提供了这些网站的概览。他们对他们更有吸引力。
它们充当网站的营销和广告替代品。他们还可以在几秒钟内预测用户的兴趣。
最终，看起来不错的东西卖得很好。
创建 Angular 轮播
首先，我们将安装 angular-responsive-carousel 库。要安装这个库，我们可以使用命令行。
# angular CLI
npm i angular-responsive-carousel
一旦我们安装了这个库，我们需要安装这个库的依赖，tslib。因此，让我们也使用命令行安装它。
# angular CLI
npm i tslib
在下一步中，我们需要在 app.module.ts 中导入 IvyCarouselModule 并在我们类的导入中添加 IvyCarouselModule。
所以我们的 app.module.ts 将如下所示。
# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {IvyCarouselModule} from 'angular-responsive-carousel';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [BrowserModule, FormsModule, IvyCarouselModule],
declarations: [AppComponent, HelloComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
在下一步中，我们将在 app.component.html 文件中添加我们的内容。
# angular
<carousel>
<div class="carousel-cell">
<img
src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
/>
</div>
<div class="carousel-cell">
<img
src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
/>
</div>
<div class="carousel-cell">
<img
src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
/>
</div>
</carousel>
输出：
我们可以使用 carousel 标签来制作我们想要的任意数量的 carousel，并且在我们的 carousel 标签中，我们需要在 div 中添加图像，其类为 carousel-cell。
这个库最好的一点是我们不需要做太多的工作。我们可以使用库类导入库并添加图像，它将为我们提供一个完整的工作和响应式轮播。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn