Componente de carrusel MDBootstrap angular

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar Carousel Component en Angular MDBootstap. El componente Carrusel se usa para hacer una presentación de diapositivas que usa transformaciones 3D de CSS y un poco de JavaScript para recorrer una secuencia de contenido, en función de una colección de imágenes.

Propiedades:

• allowSwipe: se utiliza para permitir a los usuarios utilizar gestos de deslizamiento.
• animación: se utiliza para permitir a los usuarios especificar el tipo de animación.
• Intervalo: se utiliza para mostrar la cantidad de tiempo de retraso entre el ciclo automático de un elemento.
• noPause: Es el no pausas en el ciclado del carrusel.
• noWrap: se utiliza para especificar si el carrusel debe circular de forma continua o tener paradas bruscas.
• teclado: se utiliza para especificar si el carrusel debe reaccionar a los eventos del teclado.
• activeSlideIndex: Es el índice de la diapositiva que se muestra actualmente.
• isControls: si se establece en false, el carrusel no mostrará los botones siguiente y anterior.
• tipo: se utiliza para permitir a los usuarios especificar el tipo de carrusel.

Sintaxis:

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

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Carrusel en Angular MDBootstrap.

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

Producción:

Componente de carrusel MDBootstrap angular

Ejemplo 2: este ejemplo ilustra la adición de títulos en un componente de carrusel.

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

• aplicación.módulo.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{}

Producción:

Agregar un título al Carrusel en el Componente Carrusel

Referencia: https://mdbootstrap.com/docs/angular/advanced/carousel