Header Ads Widget

Ticker

6/recent/ticker-posts

Control deslizante de carrusel de material angular 10 con imágenes

 Angular Material no proporciona un componente de carrusel incorporado que le permita crear interfaces de usuario de material con carruseles, pero la comunidad desarrolló algunas bibliotecas como @ngmodule/material-carouselVeamos cómo usar esta biblioteca por ejemplo con la última versión de Angular 10 para implementar un carrusel simple con imágenes en nuestra aplicación.

Debe tener instalada la última versión de Angular CLI 10 en su máquina de desarrollo y generar una aplicación Angular 10 usando la CLI.

Implementación de un carrusel de materiales con el ejemplo de Angular 10

Si necesita agregar un control deslizante / carrusel de imagen en su aplicación Angular 10 sin implementarlo desde cero, ya que no hay uno integrado en Material. Puede seguir las instrucciones a continuación para mostrarle cómo usar una biblioteca externa para integrar un control deslizante de carrusel sin mucha molestia.

Si tiene los requisitos previos necesarios, siga las instrucciones a continuación.

Agregar material angular

Primero, abra una interfaz de línea de comandos y ejecute el siguiente comando para agregar material angular en su proyecto:

$ ng add @angular/material

Se le harán un montón de preguntas que podrá responder como mejor le parezca para su caso de uso.

Instalando material-carousel

A continuación, debe instalar la @ngmodule/material-carouselbiblioteca con el siguiente comando:

$ npm install @ngmodule/material-carousel

A continuación, debe importar MatCarouselModuleen el módulo de la aplicación. Abra el src/app/app.module.tsarchivo y actualícelo de la siguiente manera:

// [...]
import { MatCarouselModule } from '@ngmodule/material-carousel';

@NgModule({
  // [...]
  imports: [
    // [...]
    MatCarouselModule.forRoot(),

  ]
})
export class AppModule {}

Eso es todo, ahora puede usar el componente carrusel en sus plantillas angulares de la siguiente manera.

Abra el src/app/app.component.tsarchivo y agregue el siguiente código:

import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';

// [...]

export class AppComponent {

  // Array of images

  slides = [{'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}, {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'},{'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}, {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}, {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}];

}

A continuación, abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

<h1>Angular 10 Material Carousel Slider</h1>

  <mat-carousel
  timings="200ms ease-in"
  [autoplay]="true"
  interval="6000"
  color="white"
>
  <mat-carousel-slide
    *ngFor="let slide of slides; let i = index"
    [image]="slide.image"
    overlayColor="#ffffff"
    [hideOverlay]="false"
  ></mat-carousel-slide>
</mat-carousel>

Creamos un <mat-carousel>elemento y pasamos cualquier propiedad para configurar el carrusel como el intervalo de tiempo entre diapositivas y el color, etc.

A continuación, iteramos sobre la slidesmatriz en nuestro componente angular usando la ngFordirectiva y creamos una diapositiva para cada imagen usando la <mat-carousel-slide>directiva. También podemos configurar propiedades para las diapositivas como imageoverlayColorhideOverlay, etc.

Consulte los documentos para obtener más información sobre la biblioteca.

Conclusión

En esta breve publicación, hemos visto por ejemplo cómo crear fácilmente un carrusel en la interfaz de usuario de Angular 10 Material usando la @ngmodule/material-carouselbiblioteca, ya que Angular Material no proporciona un componente de carrusel incorporado de forma predeterminada.


Publicar un comentario

0 Comentarios