Blossom Carousel ergänzt natives Scrollen um Ziehen per Maus

Der Entwickler Jesper Vos pflegt mit Blossom Carousel eine Bibliothek, die einen gewöhnlichen Scroll-Container mit der Maus ziehbar macht, statt ihn durch ein eigenes Karussell zu ersetzen.^[1] Auf GitHub hat das Projekt seit April 2025 rund 1.100 Sterne gesammelt, die aktuelle Version 1.1.10 des Kernpakets erschien am 4. November 2026.^[2][3]

Der Ansatz setzt an einer Lücke an: Auf Touch-Geräten lassen sich horizontale Container per Wisch bewegen, am Desktop fehlt dieses Ziehen.^[4] Blossom ergänzt nur das und überlässt den Rest dem Browser.

Was macht Blossom Carousel anders als Swiper oder Embla?

Die Bibliothek ersetzt den Scroll-Container nicht, sondern ergänzt ihn. Layout, Einrasten und Abstände bleiben CSS, Blossom liefert nur das Ziehen.

Slides sind direkte Kinder eines Containers, Breite, Abstände und Snap-Punkte legen Sie mit CSS fest.^[1] Vorgesehen sind Pakete für React, Vue, Svelte, Web Components und einen Kern ohne Framework.^[2] Beim Umstieg von Swiper rät die Migrationsanleitung, Optionen wie slidesPerView und spaceBetween in Stylesheets zu verschieben.^[5]

Der Mechanismus: Der Browser bleibt für das Scrollen zuständig, Blossom setzt nur das Ziehen obenauf und lädt es erst, wenn ein feiner Zeiger erkannt wird.^[1][4] Als erste Karussell-Bibliothek auf Basis von nativem Scrollen bezeichnet sich das Projekt selbst, unabhängig geprüft ist dieser Anspruch nicht.^[4]

Wie verbreitet und wie leicht ist die Bibliothek?

Das Kernpaket wiegt entpackt rund 51 KB und hat eine Abhängigkeit. Mit 44.728 Downloads in der Woche liegt es weit hinter Swiper und Embla.

Vom 2. bis 8. November zählte npm 44.728 Downloads für @blossom-carousel/core, bei Swiper waren es rund 5,4 Millionen, bei Embla rund 29,1 Millionen.^[3][8] Das Projekt hat 43 Forks und zwei offene Issues.^[2] Die Projektseite nennt Referenzseiten, unabhängig geprüft ist das nicht.^[1] Als Kernabhängigkeit führt npm @bramus/style-observer.^[3]

Wann reicht CSS allein, und was bleibt Handarbeit?

Seit Chrome 135 erzeugt CSS Schaltflächen und Marker selbst, das Ziehen mit der Maus gehört nicht dazu. Die Bedienung bleibt Ihre Aufgabe.

Der Chrome-Blog beschreibt ::scroll-button() und ::scroll-marker() für Karussells ohne JavaScript, die Support-Tabelle des Beitrags vom 20. März 2025 führte allerdings nur Chrome und Edge ab Version 135 auf, nicht Firefox und Safari.^[6] Den heutigen Stand prüfen Sie vor dem Einsatz bei MDN. Mausziehen erwähnt der Beitrag nicht, genau diese Lücke füllt Blossom.

Die Dokumentation von Blossom verspricht keine fertige Barrierefreiheit. Nicht jeder horizontale Scroller müsse als Karussell auftreten, heißt es dort, bei einer Liste mit mehreren sichtbaren Karten reicht Listenmarkup, ergänzt um beschriftete Vor- und Zurück-Knöpfe.^[7] Für Agenturen heißt das: Version festschreiben, Lizenz im Repository klären, ein unkritisches Karussell mit Tastatur und Screenreader testen, dann erst Kundenprojekte umstellen.

Ähnlich schlank gedacht ist die Web-Components-Bibliothek Jelly UI. Wie viel heute ohne Paket geht, zeigen 12 CSS-Funktionen ohne Build-Schritt, und wie Bibliotheken die Geschwindigkeit beeinflussen, hat Den Odell an zehn Designsystemen gemessen.

Quellen

Mehr Newshunger?

• Jelly UI: Web-Components-Bibliothek mit Federphysik
• edge-aura legt einen animierten Lichtsaum um den Bildschirmrand
• Sidenotes mit CSS Anchor Positioning: Randnotizen ohne JavaScript
• Site Seeing testet Webseiten in ungewöhnlichen Browserfenstern
• Designsysteme sollten von Haus aus schnell sein: Den Odell misst zehn Bibliotheken
• 12 CSS-Funktionen, die Sie ohne Build-Schritt nutzen können