LiInfiniteCarousel – Eine Karussell-Komponente für Angular6

In der Tat gibt es verschiedene Karussells, unter anderem von NgBootstrap oder PrimeNg. Allerdings sind diese in Ihrer Funktionalität beschränkt und erfüllen nicht unbedingt, die Ansprüche, die man an sein solches Tool hat. 

Denn diese Karussells verwenden in der Regel nur eines von zwei Prinzipien:

1. Es wird nur eine Folie angezeigt. Ein Klick auf den Vor-/Zurück-Button schaltet zur vorigen oder nächsten Folie.
2. Es werden mehrere Elemente gleichzeitig angezeigt. Ein Klick auf den Vor-/Zurück-Button lässt alle aktuell gezeigten Elemente verschwinden und zeigt die nächsten Elemente an. Im Grunde ist diese Methode genau wie Variante 1, nur dass mehrere Elemente in einer Folie angezeigt werden.

Ich habe jedoch kein Karussell gefunden, welches folgende Anforderungen erfüllt:

• Es sollen mehrere Elemente angezeigt werden.
• Beim Klick auf den Vor-/Zurück-Button werden die Elemente so verschoben, dass das jeweils erste oder letzte Element aus dem Sichtbereich herausgeschoben wird und dafür ein neues Element nachkommt.
• Mit Automatikmodus: Die Elemente sollen sich auch ohne Nutzerinteraktion verschieben.
• Sind weniger Elemente zum Anzeigen vorhanden, als in eine Reihe passen, sollen die Buttons ausgeblendet und das Karussell somit deaktiviert werden.

Daraufhin habe ich eine solche Karussell-Komponente erstellt, sie als Bibliothek verpackt, eine Demo-App geschrieben und im Lise-Github-Projekt veröffentlicht:

https://github.com/lisegmbh/liInfiniteCarousel

Wie immer gilt: Mitmachen und teilen ist erwünscht!

Feature-Wünsche, Bugmeldungen und Verbesserungsvorschläge werden ebenso gerne wie Pull-Requests auf Github entgegengenommen! Die Veröffentlichung auf NPM ist ebenfalls geplant.