Angular MDBootstrap旋转木马组件

MDBootstrap是一个基于Material Design和bootstrap的Angular UI库，通过其无缝和易于使用的组件来制作有吸引力的网页。在这篇文章中，我们将知道如何在Angular MDBootstap中使用Carousel组件。旋转木马组件**是用来制作幻灯片的，它使用CSS三维变换和少量的JavaScript来循环播放一连串的内容，基于图片的集合。

属性：

allowSwipe。它用于允许用户使用刷卡手势。
动画。它用于允许用户指定动画类型。
间隔。它用于显示自动循环项目之间延迟的时间量。
noPause。它是指旋转木马的循环没有暂停。
noWrap。它用于指定旋转木马是否应该连续循环或有硬停。
键盘。它用于指定旋转木马是否应该对键盘事件做出反应。
activeSlideIndex。它是当前显示的幻灯片的索引。
isControls。如果设置为false，旋转木马将不显示下一个和上一个按钮。
类型。它用于允许用户指定旋转木马的类型。

语法:

<mdb-carousel>
    <mdb-carousel-item>
      <img src="link" alt="First slide">
   </mdb-carousel-item>
</mdb-carousel>

步骤:

从官方网站下载Angular MDBootstrap。
将文件提取到当前工作目录。
使用以下命令在当前项目中安装npm。

npm install

在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

使用以下命令启动服务器。

ng serve

项目结构：完成安装后，它将看起来像下面这样。

Angular MDBootstrap旋转木马组件

Project Structure

例子1：这是一个基本的例子，说明了如何在Angular MDBootstrap中使用Carousel组件。

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Carousel Component</h4>
    <br />
    <mdb-carousel [isControls]="false">
        <mdb-carousel-item> 
            <img class="w-25" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221102734/1.jpg" 
                 alt="First slide"> 
        </mdb-carousel-item>
        <mdb-carousel-item> 
            <img class="w-25" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221102734/2.png" 
                 alt="Second slide"> 
        </mdb-carousel-item>
        <mdb-carousel-item> 
            <img class="w-25" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221102735/3.png" 
                 alt="Third slide"> 
        </mdb-carousel-item>
    </mdb-carousel>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

输出:

Angular MDBootstrap旋转木马组件

实例2：本实例说明了在旋转木马组件中添加标题。

<div id="gfg">
    <mdb-carousel>
        <mdb-carousel-item>
            <div class="view w-100">
                <img style="height: 600px;" 
                     class="d-block w-100" 
                     src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221104121/1.jpg"
                     alt="First slide">
                <div class="mask rgba-black-light waves-light" mdbWavesEffect>
                </div>
            </div>
            <div class="carousel-caption">
                <h3 class="h3-responsive">
                    GeeksforGeeks
                </h3>
                <p>Red</p>
  
            </div>
        </mdb-carousel-item>
        <mdb-carousel-item>
            <div class="view w-100">
                <img style="height: 600px;" 
                     class="d-block w-100" 
                     src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221104122/2.png" 
                     alt="Second slide">
                <div class="mask rgba-black-light waves-light" mdbWavesEffect>
                </div>
            </div>
            <div class="carousel-caption">
                <h3 class="h3-responsive">
                    GeeksforGeeks
                </h3>
                <p>Blue</p>
  
            </div>
        </mdb-carousel-item>
        <mdb-carousel-item>
            <div class="view w-100"> 
                <img style="height: 600px;" 
                     class="d-block w-100" 
                     src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221104123/3.png" 
                     alt="Third slide">
                <div class="mask rgba-black-light waves-light" mdbWavesEffect>
                </div>
            </div>
            <div class="carousel-caption">
                <h3 class="h3-responsive">
                    GeeksforGeeks
                </h3>
                <p>Green</p>
  
            </div>
        </mdb-carousel-item>
    </mdb-carousel>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

输出:

Angular MDBootstrap旋转木马组件