Karussell in Angular

1. Karussell in Angular
2. Angular Karussell erstellen

Wir stellen das angular-responsive-carousel vor und wie man damit ein Karussell erstellt.

Karussell in Angular

Heutzutage sind Karussells die beliebtesten Gestaltungselemente, die von Website-Entwicklern in Websites verwendet werden. Karussells präsentieren Informationen sofort auf optisch ansprechende Weise für die Endbenutzer.

Angular Materialkarussells zeigen ein oder mehrere Bilder zusammen an. Diese Bilder drehen sich automatisch oder manuell durch Klicken auf die Schaltfläche oder durch Wischen von einem Rahmen zum anderen.

Und diese Karussells können auf der Homepage oder jeder anderen Seite in horizontaler und vertikaler Ausrichtung erstellt werden.

Warum Angular Karussells verwenden?

Angularkarussells werden von vielen Unternehmen wie Ali Express, Amazon und vielen anderen Unternehmen verwendet.

Es ist einfach, die Aufmerksamkeit der Benutzer zu gewinnen, da diese Banner einen Überblick über diese Websites bieten. Sie wirken ansprechender auf sie.

Sie fungieren als Marketing- und Werbealternativen für Websites. Außerdem antizipieren sie innerhalb weniger Sekunden die Interessen des Nutzers.

Was gut aussieht, verkauft sich schließlich auch gut.

Angular Karussell erstellen

Als erstes installieren wir die Bibliothek angular-responsive-carousel. Um diese Bibliothek zu installieren, können wir die Befehlszeile verwenden.

# angular CLI
npm i angular-responsive-carousel

Nachdem wir die Bibliothek installiert haben, müssen wir die Abhängigkeit für diese Bibliothek tslib installieren. Lassen Sie uns es also auch über die Befehlszeile installieren.

# angular CLI
npm i tslib

Im nächsten Schritt müssen wir IvyCarouselModule in die app.module.ts importieren und IvyCarouselModule in imports innerhalb unserer Klasse hinzufügen.

Unsere app.module.ts sieht also wie folgt aus.

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

Im nächsten Schritt fügen wir unseren Inhalt in die Datei app.component.html ein.

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

Ausgabe:

Wir können ein carousel-Tag verwenden, um so viele Karussells zu erstellen, wie wir wollen, und innerhalb unseres carousel-Tags müssen wir Bilder in einem div mit einer Klasse carousel-cell hinzufügen.

Das Beste an dieser Bibliothek ist, dass wir nicht viel Arbeit machen müssen. Wir können die Bibliothek importieren und Bilder mithilfe von Bibliotheksklassen hinzufügen, und es wird ein voll funktionsfähiges und reaktionsschnelles Karussell für uns.