Carrusel en Angular

1. Carrusel en Angular
2. Crear carrusel angular

Presentaremos el angular-responsive-carousel y cómo crear un carrusel usándolo.

Carrusel en Angular

Hoy en día, los carruseles son los elementos de diseño más populares utilizados en los sitios web por los desarrolladores de sitios web. Los carruseles muestran información al instante de una manera visualmente atractiva para los usuarios finales.

Los carruseles de material angular muestran una o varias imágenes juntas. Estas imágenes rotan automáticamente o rotan manualmente al hacer clic en un botón o deslizar el dedo de un cuadro a otro.

Y estos carruseles se pueden crear en orientaciones horizontales y verticales en la página de inicio o en cualquier otra página.

Por qué usar carruseles Angular

Muchas empresas como Ali Express, Amazon y muchas otras empresas utilizan carruseles Angular.

Es fácil llamar la atención de los usuarios porque estos banners brindan una descripción general de estos sitios web. Son más atractivos para ellos.

Actúan como alternativas de marketing y publicidad para los sitios web. También anticipan los intereses del usuario en pocos segundos.

Al final, lo que se ve bien, se vende bien.

Crear carrusel angular

En primer lugar, instalaremos la biblioteca angular-responsive-carousel. Para instalar esta biblioteca, podemos usar la línea de comando.

# angular CLI
npm i angular-responsive-carousel

Una vez que hayamos instalado la biblioteca, debemos instalar la dependencia para esta biblioteca, tslib. Así que vamos a instalarlo también con la línea de comandos.

# angular CLI
npm i tslib

En el siguiente paso, debemos importar IvyCarouselModule en app.module.ts y agregar IvyCarouselModule en las importaciones dentro de nuestra clase.

Entonces nuestro app.module.ts se verá como a continuación.

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

En el siguiente paso, añadiremos nuestro contenido en el archivo 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>

Producción:

Podemos utilizar una etiqueta carousel para hacer tantos carruseles como queramos, y dentro de nuestra etiqueta carousel, tenemos que añadir imágenes en un div con clase carousel-cell.

Lo mejor de esta biblioteca es que no tenemos que trabajar mucho. Podemos importar la biblioteca y agregar imágenes usando clases de biblioteca, y creará un carrusel completamente funcional y receptivo para nosotros.