Swipe Card

Beschreibung:

Die Swipe Karte ist eine Karte auf der die größe einer Karte einnimmt aber darau mehrer Karten hinterlegt werden können. In einer art Karusell kann man dann durch die Karten wischen. Wie bei einer Diashow von Webseiten wo man ja auch durch die Bilder wischen kann. Hier kann man dann noch angeben ob Punkte Striche oder gar nichts angezeigt werden soll auf welcher Seite man sich befindet.

Installation:

Aus dem HACS Store die Swipe Karte installieren. Suchebgriff swipe card

Auf Add Karte klicken und die Swipe Karte auswählen.
Leider ist die Swipe Karte nur mit yaml Konfigurierbar aber trotzdem simpel.

Unser Basiscode nachdem wir die Karte hinzugefügt haben.
Nicht sehr spektakulär.

type: custom:swipe-card
cards: []

Als erstes vergeben wir wieder ein psotion , vorrausgesetzt Ihr nutzt die Grid Card, sonst natürlich nicht

type: custom:swipe-card
view_layout: #unsere positionsangbe
  grid-area: middle
cards: []

Nun stellen wir die Eigenschaften unserer Swipe Karte ein.
Hier eine Komplettliste aller Paramter auf der Seite des Entwicklers:

https://swiperjs.com/swiper-api#parameters

type: custom:swipe-card
view_layout:
  grid-area: middle
parameters:
  spaceBetween: 8 #abstand zwischen den swipe Karten beim wischen siehe Screenschot unten.
  effect: coverflow #der typ der animation beim wechseln / wischen der karte
  grabCursor: false #Auf System mit Mauzeiger unterstützung wird dann hier das Handsymbol angezeigt, 
  #ich deaktiviere es, weil beim anklicken von Elemnten doch stören kann, auf mobilen geräten gibt es eh keinen Cursor
  #außer es ist eine maus angeschlossen.
  centeredSlides: false #da es dann probleme mit Vertikalen und Horizontalen STack Karten innerhalb der Swipe Karte kommt und ich
  #diese Karten aber darin einbetten möchte
  slidesPerView: auto #Dies hab ich auf Auto gelassen
  coverFlowEffect: #wie der Flow aussehen soll. Einfach ausprobieren oder so lassen.
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideshadows: true
  pagination:
    type: progressbar #wie der Seitenzähler angezeigt werden soll, mögliche werte: 	'progressbar' | 'bullets' | 'fraction' | 'custom'
  
  
cards: []

Damit hätten wir die Grundeinstellung erledigt.
Nun Können wir darin, unsere Karten hinzufügen.
Beispiel mit einer Vertikal Stack Karte und einer Rollanden Karte.

Ein Nachteil hat die Swipe Karte. Man kann  darin nicht den Visuellen Editor für die darin enthaltenden  Karten nutzen.
Tipp: Die Karte erst fertig konfigurieren, Code kopieren und in die Vertical / bzw. Sipe Karte einfügen, je nach dem.

Im Ersten Kart Abschnitt der Vertical Stack und im Vertical Stack die Karte für die Rollade. Wir können jetzt weite Karten im Vertical stack hinzufügen. Ich hab den Abschnitt Parameter hier mal rausgelassen, damits überscihtliocher ist

type: custom:swipe-card
view_layout:
  grid-area: middle
#hier wären die parameter
cards:
  - type: vertical-stack
    cards:
      - type: custom:shutter-row
        move_up_button: {}
        move_stop_button: {}
        move_down_button: {}
        entity: cover.rollade_wohnzimmer_cover

Weiteren Vertical Stack für die zweite Seite. Da blenden wir jetzt ne Wetter Karte ein. Auch schöne Custom Wetter Card mit Animation.

type: custom:swipe-card
view_layout:
  grid-area: middle
  #hier wären die parameter
cards:
  - type: vertical-stack
    cards:
      - type: custom:shutter-row
        move_up_button: {}
        move_stop_button: {}
        move_down_button: {}
        entity: cover.rollade_wohnzimmer_cover
  - type: vertical-stack
    cards:
      - type: custom:weather-card
        entity: weather.home
        forecast: true
        details: true
        current: true
        hourly_forecast: true

Uns so sieht das Ergebnis  aus, beim wischen

Fertig