Zum Inhalt springen

Swipe Card

In diesem Beitrag zeige dir viele Einstellungsmöglichkeiten für die HACS Swipe Card von Bram Kragten (https://github.com/bramkragten/swipe-card). Mit dieser Karte kannst du zwischen verschiedenen Karten swipen. Ich gehe nicht nur auf die Installation dieser Karte, sondern auch auf die Einstellungsmöglichkeiten und Effekte ein.

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Installation Swipe Card

Diese Karte ann automatisch über den HACS heruntergeladen und installiert werden. Hierzu klickst du auf den HACS -> Frontend -> Repository hinzufügen. Im folgenden Menü suchst du nach der Swipe Card und klickst dann auf herunterladen. Nun wird die Swipe Card installiert. Im Anschluss muss der Cache noch einmal neu geladen werden.

Hinzufügen zum Dashboard

Mit folgendem yaml Code fügst du die Karte zu deinem Dashboard hinzu. Dazu klickst du auf Karte hinzufügen.

type: custom:swipe-card
cards:

Im folgenden Code zeige ich dir, wie du drei Entitätenkarten (Temperatur außen, Temperatur 1 und Temperatur 2) hinzufügst.

type: custom:swipe-card
cards:
  - type: entity    
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2
Beispiel 1 Swipe Card
Beispiel 1

Zusätzliche Parameter

Die Swipe Card verwendet das Script von Swiper. Über die Swiper Parameter können einige Veränderungen vorgenommen werden. In den folgenden Absätzen zeige ich dir einige Einstellungsmöglichkeiten.

Autoplay

Mit dem Parameter autoplay können die Karten so eingestellt werden, dass sie automatisch wechseln.

type: custom:swipe-card
parameters:
  autoplay:
    delay: 5000
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2

Beim Parameter Autoplay kannst du den Zeitraum zwischen dem Wechsel der Karten in Millisekunden (delay) eingeben.

Parameter Autoplay
Parameter Autoplay

Karte vertikal wischen

Mit dem folgenden Code kannst du die Karten vertikal wischen. Beachte jedoch, dass durch die Höhenangabe ggfls. dein Dashboard nicht mehr responsable ist.

type: custom:swipe-card
parameters:
  height: 90
  autoHeight: true
  direction: vertical
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2
Swipe card vertikal swipen
Karten vertikal swipen

width

Mit dem Parameter „width“ kannst du die Breite des Swipers verändern.

type: custom:swipe-card
parameters:
  width: 200
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2
Swipe card Width
Swipe card width

Effekte

Du kannst unterschiedliche Effekte beim Wechsel der Karten einstellen.

Coverflow Effekt

Du kannst mit folgendem Code den Coverflow Effekt erstellen.

type: custom:swipe-card
parameters:
  effect: coverflow
  coverflowEffect: 
    rotate: 30
    slideShadows: false
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2

Es können noch weitere Einstellungen vorgenommen werden. Diese findest du auf der Seite des Programmierers (https://swiperjs.com/types/interfaces/types_modules_effect_coverflow.CoverflowEffectOptions).

Coverflow Effekt
Coverflow Effekt

Cube Effekt

Du kannst den Cube Effekt mit folgendem Code erstellen.

type: custom:swipe-card
parameters:
  effect: cube
  cubeEffect:
    slideShadows: false
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2
Cube Effekt
Cube Effekt

Fade Effekt

Möchtest du einen Fade Effekt erzielen, kannst du folgenden Code verwenden.

type: custom:swipe-card
parameters:
  effect: fade
  fadeEffect:
    crossFade: true
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2
Fade Effekt
Fade Effekt

Flip Effekt

Den Flip Effekt erhälst du mit folgendem Code.

type: custom:swipe-card
parameters:
  effect: flip
  flipEffect:
    slideShadows: false
cards:
  - type: entity
    entity: sensor.gw2000a_outdoor_temperature
  - type: entity
    entity: sensor.gw2000a_temperature_1
  - type: entity
    entity: sensor.gw2000a_temperature_2
Flip Effekt
Flip Effekt

Nächster Schritt:Home Assistant – Leitfaden (DE)

Bewerte diesen Beitrag

Dein Feedback ist mir wichtig! Hat dir der Beitrag geholfen oder fehlte dir etwas? Schreib’s mir gerne in die Kommentare oder bewerte den Artikel – so kann ich meine Inhalte noch besser machen.

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 7

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Support & Hilfe

Du hast eine Frage oder brauchst Unterstützung? Über meinen Support kannst du ganz einfach ein Ticket erstellen – ich helfe dir so schnell wie möglich weiter.

Meine Produktempfehlungen für dich

Einige der folgenden Produktlinks sind sogenannte Affiliate-Links. Wenn du darüber etwas kaufst, erhalte ich eine kleine Provision – für dich bleibt der Preis natürlich gleich.

Raspi Pi 5SonoffFritz-Box 5590Fritz-Repeater 6000Ecowitt Wetterstation
Raspberry Pi 5 8GB Starter-Kit | 128GB Ultra Edition | 45W Netzteil | Offizielles Gehäuse mit Lüfter | 4K Micro HDMI Kabel 1m | Alu-Kühlkörper
Raspberry Pi 5 8GB Starter-Kit | 128GB Ultra Edition | 45W Netzteil | Offizielles Gehäuse mit Lüfter | 4K Micro HDMI Kabel 1m | Alu-Kühlkörper*
von smart-home-komponente
  • Raspberry Pi 5 8GB Quad-core ARMA76 (64 Bits - 2,4 GHz)
  • Raspberry Pi 5 Gehäuse mit Lüfter und Kühlkörper
  • Raspberry Pi 5 Netzteil 5,1 V / 5A / 45W
  • 4K HDMI zu Micro HDMI Kabel 1m
  • Ultra 64GB microSDHC + SD-Karten-Adapter
 Preis: € 144,90 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten
Zuletzt aktualisiert am 1. Dezember 2025 um 10:58 . Ich weise darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.
SONOFF Zigbee 3.0 USB Dongle Plus,Zigbee Gateway TI CC2652P + CP2102N Zigbee USB Stick,Zigbee Hub für ZHA in Home Assistant or Zigbee2MQTT,Open HAB etc.
SONOFF Zigbee 3.0 USB Dongle Plus,Zigbee Gateway TI CC2652P + CP2102N Zigbee USB Stick,Zigbee Hub für ZHA in Home Assistant or Zigbee2MQTT,Open HAB etc.*
von SONOFF
  • Vorgeflasht mit Z-Stack 3.x.0-Koordinator-Firmware
  • Basis auf TI CC2652P + CP2102(N)
  • Dieser zigbee 3.0 USB-Dongle-p als ZigBee-Gateway zur Verwaltung von Untergeräten in Open-Source-Plattformen mit HomeAssistant oder Zigbee2MQTT
  • SMA-Schnittstelle externe Antenne,Aluminiumgehäuse reduziert effektiv Signalstörungen von Peripheriegeräten, +20dBm Ausgangsverstärkung
  • Kann in ZigBee-Routing-Firmware flashen, als Router im ZigBee-Netzwerk die Netzwerkreichweite erweitern
Unverb. Preisempf.: € 29,74 Du sparst: € 4,46 (-15%)  Preis: € 25,28 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten
Zuletzt aktualisiert am 1. Dezember 2025 um 10:58 . Ich weise darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.
FRITZ!Box 5590 Fiber | Router für einen Glasfaseranschluss (Wi-Fi 6, bis 2.400 MBit/s (5 GHz) und 1.200 MBit/s (2,4 GHz), WLAN Mesh, DECT-Basis, 2,5-Gigabit-LAN-Port, geeignet für Deutschland)
FRITZ!Box 5590 Fiber | Router für einen Glasfaseranschluss (Wi-Fi 6, bis 2.400 MBit/s (5 GHz) und 1.200 MBit/s (2,4 GHz), WLAN Mesh, DECT-Basis, 2,5-Gigabit-LAN-Port, geeignet für Deutschland)*
von AVM
  • WLAN-Router mit integriertem Glasfasermodem für einen direkten Anschluss an alle in Deutschland gängigen Glasfaseranschlüsse, die passenden FRITZ!SFP-Module AON und GPON sind im Lieferumfang enthalten
  • Mehr Performance, Flexibilität und stabilste Verbindungen mit modernem Wi-Fi 6: WLAN (4x4) mit bis zu 2.400 MBit/s (5 GHz) und 1.200 MBit/s (2,4 GHz) für eine Vielzahl an Endgeräten und parallelen Anwendungen
  • Mesh Master-Funktion: die FRITZ!Box fasst verteilte WLAN-Zugangspunkte (z. B. mehrere FRITZ!Repeater) zu einem intelligenten WLAN-Netz zusammen und steuert sie so, dass die genutzten Endgeräte im Heimnetz immer am Zugangspunkt mit der besten Verbindung angemeldet sind
  • VoIP-Telefonanlage mit vielseitigen Komfortfunktionen für alle Telefone (Analog-, DECT- und IP-Telefone) sowie DECT-Basis für bis zu sechs Schnurlos-Telefone und zur Steuerung von Smarthome-Geräten, z. B. die schaltbaren Steckdosen FRITZ!DECT 200/210 oder der Heizkörperregler FRITZ!DECT 302
  • 4 ultraschnelle Gigabit-LAN-Anschlüsse für Computer, Fernseher und andere Netzwerk-Geräte, 1x 2,5 Gigabit-WAN-Anschluss, 2x USB 3.0-Anschluss für Drucker und Speicher im Netz, SFP-Cage für ein FRITZ!SFP Modul
  • Lieferumfang: FRITZ!Box 5590 Fiber, 1x FRITZ!SFP AON, 1x FRITZ!SFP GPON, 1x Netzteil, 4m Glasfaserkabel (LC/APC - LC/APC), 1,5m LAN-Kabel, Installationsanleitung
Unverb. Preisempf.: € 279,00 Du sparst: € 79,01 (-28%)  Preis: € 199,99 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten
Zuletzt aktualisiert am 1. Dezember 2025 um 10:58 . Ich weise darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.
FRITZ!Repeater 6000 (WiFi 6 Repeater mit drei Funkeinheiten: 5 GHz (2 x bis zu 2.400 MBit/s), 2,4 GHz (bis zu 1.200 MBit/s), 2,5-Gigabit-LAN, deutschsprachige Version)
FRITZ!Repeater 6000 (WiFi 6 Repeater mit drei Funkeinheiten: 5 GHz (2 x bis zu 2.400 MBit/s), 2,4 GHz (bis zu 1.200 MBit/s), 2,5-Gigabit-LAN, deutschsprachige Version)*
von AVM
  • Innovatives und schnelles WiFi 6 ausgelegt für ein anspruchsvolles Heimnetz mit einer Vielzahl an gleichzeitig verwendeten WLAN-Endgeräten
  • Intelligente und automatische Bandauswahl im laufenden Betrieb: Drei Funkeinheiten für ein High-End WLAN mit bis zu 6.000 MBit/s (WLAN AX)
  • Ultraschneller Gigabit-LAN-Anschluss für den Aufbau einer LAN-Brücke oder für Netzwerkgeräte ohne WLAN-Funktion
  • WLAN Mesh: Mehrere WLAN-Zugangspunkte werden zu einem WLAN-Netz mit optimaler Leistung zusammengefasst, kompatibel zu allen gängigen WLAN-Routern, einfache und sichere WLAN-Einrichtung per Knopfdrucküber WPS
  • Lieferumfang: FRITZ!Repeater 6000, Installationsanleitung, 1x Netzwerkkabel und 1x Netzteil
Unverb. Preisempf.: € 259,00 Du sparst: € 70,01 (-27%)  Preis: € 188,99 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten
Zuletzt aktualisiert am 1. Dezember 2025 um 10:58 . Ich weise darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.
ECOWITT Wittboy Wetterstation mit Außensensor GW2001, 7-in-1 Außensensor WS90 mit Wi-Fi/Kabel-Gateway GW2000 Genaue Wettervorhersagedaten für Haus, Garten und Bauernhof 868 MHz
ECOWITT Wittboy Wetterstation mit Außensensor GW2001, 7-in-1 Außensensor WS90 mit Wi-Fi/Kabel-Gateway GW2000 Genaue Wettervorhersagedaten für Haus, Garten und Bauernhof 868 MHz*
von ECOWITT
  • 【Multifunktionale Funk-Wetterstation für Zuhause】 Die Ecowitt Wittboy professionelle Wetterstation wird mit einem WLAN-Hub-Gateway und einem 7-in-1-Außensensor geliefert. Über einen drahtlosen/kabelgebundenen Gateway-Hub GW2000 können wir nach der WLAN-Konfiguration alle Wettervorhersagen des Tages auf der Ecowitt-App oder anderen Geräten ablesen. Die neueste Version der Wetterstation ist kleiner, intelligenter und einfacher zu bedienen. Frequenz: 868 MHz.
  • 【7 in 1 Wetterstation mit kabellosem Außensensor】: Ecowitt WittBoy Wetterstation Der Außensensor umfasst einen berührbaren Regensensor, einen Licht- und UV-Sensor, LED-Anzeige, ein Solarpanel, einen Ultraschall-Windgeschwindigkeitssensor, einen Temperatur- und Feuchtigkeitssensor im Innenbereich, eine Nordausrichtungsanzeige, die Außentemperatur und -feuchtigkeit, Windgeschwindigkeit und -richtung, Niederschlag und UV-Licht erkennen kann. Feste Schraube (Montage auf einer Stange mit 2,5 cm Durchmesser).
  • 【3-in-1 GW2000 kabelgebundener / kabelloser Gateway-Hub】 Bietet 3 WLAN-Konfigurationsmethoden. Ausgestattet mit einem fortschrittlichen 3-in-1-Sondensensor für Temperatur, Luftfeuchtigkeit und Luftdruck mit OTA-Technologie kann der GW2000 Hub die Firmware automatisch aktualisieren, wenn WLAN angeschlossen ist. Die Firmware der Außenwetterstation muss manuell aktualisiert werden. Voraussetzung: GW2000 Gateway mit Ihrem Router verbunden mit Internetzugang aus dem Netzwerk
  • 【Drahtlose / kabelgebundene Verbindung】Verbinden Sie sich mit WU oder WeatherCloud und anderen benutzerdefinierten Websites (wenn die Website das gleiche Protokoll wie Wunderground oder Ecowitt hat). Mit WU können Sie lokale persönliche Wetterstationsdaten anzeigen, speichern, analysieren, teilen und vergleichen und schöne anpassbare Diagramme und Grafiken verwenden, um Gemeinschaftswetterhistorie-Daten sowie E-Mail-Benachrichtigungen zu erstellen.
  • 【Pairing mit verschiedenen Sensoren】 Der WLAN Wetterstation Hub GW2000 kann mit verschiedenen Ecowitt Funksensoren (separat erhältlich) und anderen zu entwickelnden Sensoren gekoppelt werden, z. B. WN34-Thermometer, bis zu 4 WH41/WH43 Luftqualitätssensoren / WH55 Wasserleckdetektor, 1 × WH40 Regenmesser Sensor / WH45 Luftqualitätssensoren / Windmesser WS68 Sensor / WH57 Blitzsensor usw.
  • Einige dieser Produkte haben einen kostenlosen UK-Stecker, nicht alle von ihnen, können nicht für den europäischen Standardstecker geeignet sein, aber die Verteilung der Netzwerkkabel ist ein USB-Stecker, um die Bedürfnisse der Kunden zu erfüllen, beeinträchtigt nicht die Verwendung des Produkts, wenn die Steckdose nicht zutrifft, ignorieren Sie sie bitte, ich hoffe, kein Missverständnis zu verursachen.
  • Unsere Präzisions-Temperatur- und Feuchtigkeitsmodule werden leicht vom Meerwasser angegriffen. Wenn wir also am Strand oder auf einer Insel sein müssen, können wir keine konventionellen Produkte verwenden und benötigen bessere Temperatur- und Feuchtigkeitssensoren mit Keramikkartuschen, kontaktieren Sie uns bitte.
  • Achtung: WS90 Outdoor-Wetterstation-Produkte haben mehr Technologie zu verbessern, aufgrund der hohen Empfindlichkeit, so dass der Wind weht, und ein leichter Regen kann zu Datenschwankungen führen, die Daten sind ungenau. Wenn Sie hohe Anforderungen an die Datengenauigkeit haben, empfehlen wir Ihnen wh40 zu kaufen und mit ws90 zu vergleichen, um Korrekturwerte zu machen. Wenn Sie keine genauen Anforderungen an die Niederschlagsdaten haben, dann ist WS90 richtig.
Unverb. Preisempf.: € 269,89 Du sparst: € 50,12 (-19%)  Preis: € 219,77 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten
Zuletzt aktualisiert am 1. Dezember 2025 um 10:58 . Ich weise darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.

Transparenzhinweis

*Die mit Sternchen markierten Links sind sogenannte „Affiliate-Links“. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen. Wird über diese ein Einkauf getätigt, werde ich mit einer kleinen Provision beteiligt – ohne das Kosten für dich entstehen. Vielen Dank für deinen Support!

Gerne darfst du aber auch meine Arbeit über eine Pay Pal Spende unterstützen.

Beitragsversion

Dieser Beitrag wird regelmäßig aktualisiert, um dir stets die aktuellsten Informationen zu bieten.

12/2023: Veröffentlichung des Beitrages

4 Gedanken zu „Swipe Card“

  1. Hallo Holger,
    ich habe die BannerCard dazu benutzt
    Also

    type: custom:swipe-card
    cards:
    - type: custom:banner-card
    heading:
    entities:
    - entity: ...

    Ich hoffe es hilft dir.
    LG Ingo

  2. Hallo Ingo,
    ich würde es gern so aussehen lassen. Bekomme es mit einem Rollo realisiert. Sobald ich nach gleichem Muster einen Zweiten einfüge, funktioniert es nicht mehr.
    Kannst du mir helfen?

    VG Sven

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

The maximum upload file size: 5 MB. You can upload: image. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here