Carrousel en Angular

1. Carrousel en Angular
2. Créer un carrousel Angular

Nous présenterons le angular-responsive-carousel et comment créer un carrousel en l’utilisant.

Carrousel en Angular

De nos jours, les carrousels sont les éléments de conception les plus populaires utilisés dans les sites Web par les développeurs de sites Web. Les carrousels présentent des informations instantanément d’une manière visuellement attrayante pour les utilisateurs finaux.

Les carrousels de matériaux Angular affichent une ou plusieurs images ensemble. Ces images pivotent automatiquement ou pivotent manuellement en cliquant sur un bouton ou en glissant d’un cadre à l’autre.

De plus, ces carrousels peuvent être créés dans des orientations horizontales et verticales sur la page d’accueil ou sur toute autre page.

Pourquoi utiliser des carrousels Angular

Les carrousels Angular sont utilisés par de nombreuses entreprises comme Ali Express, Amazon et de nombreuses autres entreprises.

Il est facile d’attirer l’attention des utilisateurs car ces bannières donnent un aperçu de ces sites. Ils sont plus attrayants pour eux.

Ils agissent comme des alternatives de marketing et de publicité pour les sites Web. Ils anticipent également les intérêts de l’utilisateur en quelques secondes.

En fin de compte, ce qui paraît bien se vend bien.

Créer un carrousel Angular

Tout d’abord, nous allons installer la librairie angular-responsive-carousel. Pour installer cette bibliothèque, nous pouvons utiliser la ligne de commande.

# angular CLI
npm i angular-responsive-carousel

Une fois que nous avons installé la bibliothèque, nous devons installer la dépendance pour cette bibliothèque, tslib. Alors installons-le également avec la ligne de commande.

# angular CLI
npm i tslib

Dans l’étape suivante, nous devons importer IvyCarouselModule dans le app.module.ts et ajouter IvyCarouselModule dans les importations à l’intérieur de notre classe.

Ainsi, notre app.module.ts ressemblera à ci-dessous.

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

Dans l’étape suivante, nous ajouterons notre contenu dans le fichier 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>

Production :

Nous pouvons utiliser une balise carousel pour créer autant de carrousels que nous le souhaitons, et à l’intérieur de notre balise carousel, nous devons ajouter des images dans un div avec une classe carousel-cell.

La meilleure chose à propos de cette bibliothèque est que nous n’avons pas à faire beaucoup de travail. Nous pouvons importer la bibliothèque et ajouter des images à l’aide de classes de bibliothèque, et cela fera un carrousel entièrement fonctionnel et réactif pour nous.