Lovelace: Swiper card

Is it possible to wrap the cards around back to the first when you get to the last? Or go directly to the last by swiping right on the first card?

Probably by using loop: true as a parameter. See Swiper API for options: Swiper API (swiperjs.com)

Can I somehow make this work with a single card? I have these mushroom chips that’s vary in lenght and I want them on a single row only. I can make one card per chip also but then they all be on different pages and it’s only one per page.

Here’s the config so far

type: custom:swipe-card
card_width: 250px
start_card: 1
parameters:
  centeredSlides: false
  spaceBetween: 2
  slidesPerView: auto
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:home-thermometer
        icon_color: var(--mush-rgb-blue)
        content: >-
          Klimat

          {{ states('sensor.temperatur_inomhus_medelvarde_min') | round(1) }}-{{
          states('sensor.temperatur_inomhus_medelvarde_max') | round(1) }}° 
        card_mod:
          style: |
            ha-card {
              padding: 2px; 
            }
            .content {
              white-space: pre-wrap;
            }  
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:lightbulb
        icon_color: var(--mush-rgb-yellow)
        content: |-
          Lampor
          {{ state_attr('sensor.belysning_antal_tanda_lampor', 'text') }} 
        card_mod:
          style: |
            ha-card {
              padding: 2px; 
            }
            .content {
              white-space: pre-wrap;
            }   
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: Ingen spelar
        icon_color: mdi:monitor-speaker
        icon: mdi:monitor-speaker
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:lock
        icon_color: var(--mush-rgb-yellow)
        content: >-
          Säkerhet

          {{ state_attr('sensor.magnetkontakt_oppna_dorrar_och_fonster', 'text')
          }} 
        card_mod:
          style: |
            ha-card {
              padding: 2px; 
            }
            .content {
              white-space: pre-wrap;
            }  


1 Like

Hello, I wonder if someone could help me as well with something that I’m struggling. Essentially I’m looking for a simple flip-swipe between a light. and a switch. entity (using minimalist-UI).

The problem is that the button cards that represent those entities have almost the same width and height as the swiper container and even if a set their tap_action: to none , it’s still difficult on touch screens to swipe back and forth. I have to touch in a very specific area of the UI as can be seen in the pictures.

Can’t swipe here:

But I can swipe here:

Here is my code so far:

          - type: 'custom:swipe-card'   #LIVING ROOM SHELF LAMP SWIPER
            parameters:
              effect: 'flip'
            cards:
              - type: "custom:button-card"    #LIVING ROOM SHELF LAMP
                template: card_light
                entity: light.shelf_lamp
                variables:
                  ulm_name_tap_action: "more-info"
                  ulm_card_light_icon: mdi:lamp
                  ulm_card_light_enable_color: true
                  ulm_card_light_force_background_color: true
              - type: 'custom:button-card'    #LIVING ROOM SHELF LAMP POWER
                template: card_power_outlet
                variables:
                  ulm_name_tap_action: "toggle"
                  ulm_card_power_outlet_name: "Shelf lamp power"
                  ulm_card_power_outlet_icon: mdi:light-switch
                  ulm_card_power_outlet_color: green
                  ulm_card_power_outlet_force_background_color: true
                entity: switch.shelf_lamp

I went through as many parameters as I could “imagine” might help such as:
spaceBetween , height , width , edgeSwipeThreshold and touchEventsTarget but either I used them wrong or they are not the ones to be used in the first place.

Any help would be greatly appreciated. Thanks!

Hey, were you able to fix this issue? I have running into the same problem

Hi. Is anyone having the same problem as me in swiper-card?

I consistently get this error when refreshing:

Uncaught (in promise) TypeError: this.createCardElement is not a function
    _rebuildCard swipe-card.js:19
    _createCardElement swipe-card.js:19
    i fire_event.ts:76
    u create-element-base.ts:129
    promise callback*7778/u/< create-element-base.ts:127
    u create-element-base.ts:215
    d create-element-base.ts:172
    w create-card-element.ts:99
    _createCardElement swipe-card.js:19
    _cardPromises swipe-card.js:19
    _createCards swipe-card.js:19
    setConfig swipe-card.js:6
    a create-element-base.ts:97
    u create-element-base.ts:111
    u create-element-base.ts:215
    d create-element-base.ts:172
    w create-card-element.ts:99
    value hui-view.ts:64
    value hui-view.ts:299
    value hui-view.ts:78
    i fire_event.ts:76
    u create-element-base.ts:129
    promise callback*7778/u/< create-element-base.ts:127
    u create-element-base.ts:215
    d create-element-base.ts:172
    w create-card-element.ts:99
    value hui-view.ts:64
    _cards hui-view.ts:283
    value hui-view.ts:282
    value hui-view.ts:216
    value hui-view.ts:130
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1263
    _$Ej reactive-element.ts:1235
    requestUpdate reactive-element.ts:1210
    u reactive-element.ts:948
3 swipe-card.js:19:1842
    _rebuildCard swipe-card.js:19
    _createCardElement swipe-card.js:19
    i fire_event.ts:76
    u create-element-base.ts:129
    (Async: promise callback)
    u create-element-base.ts:127
    u create-element-base.ts:215
    d create-element-base.ts:172
    w create-card-element.ts:99
    _createCardElement swipe-card.js:19
    InterpretGeneratorResume self-hosted:1413
    AsyncFunctionNext self-hosted:810
    (Async: async)
    _cardPromises swipe-card.js:19
    map self-hosted:221
    _createCards swipe-card.js:19
    setConfig swipe-card.js:6
    a create-element-base.ts:97
    u create-element-base.ts:111
    u create-element-base.ts:215
    d create-element-base.ts:172
    w create-card-element.ts:99
    value hui-view.ts:64
    value hui-view.ts:299
    value hui-view.ts:78
    i fire_event.ts:76
    u create-element-base.ts:129
    (Async: promise callback)
    u create-element-base.ts:127
    u create-element-base.ts:215
    d create-element-base.ts:172
    w create-card-element.ts:99
    value hui-view.ts:64
    _cards hui-view.ts:283
    map self-hosted:221
    value hui-view.ts:282
    value hui-view.ts:216
    value hui-view.ts:130
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1263
    _$Ej reactive-element.ts:1235
    AsyncFunctionNext self-hosted:810
    (Async: async)
    requestUpdate reactive-element.ts:1210
    u reactive-element.ts:948

The card doesn’t render correctly. Or, more precisely, my card includes 3 todoist cards and a markdown card, and the error shows 3 times and only the markdown card renders correctly.

But it’s strange:

  • the first time after a HASS restart, I get the errors
  • when I hit F5 to refresh, I get the errors
  • BUT if I navigate to a different dashboard, and then navigate to the one that has the swiper-card, I don’t get the error, and the card shows just fine, with all sub-cards in it.

I understand this might be a problem with the sub-cards, but I can’t tell what it is, and I can’t fix it because the exception is getting thrown in the swiper-card object… :frowning:

And my sub-cards work well when they are laid directly on the dashboard, they only break when inside the swiper-card…

The code in the part that throws the exception is this:

async _rebuildCard(e, t) { 
    let a = this.createCardElement(t); 
    try { 
        a.hass = this.hass 
    } 
    catch (e) { 
        a = document.createElement("ha-alert"), a.alertType = "error", a.innerText = e.message 
    }

(...)
}

Can anybody help me troubleshoot this, please? Thanks

I’m having the same issue with the swipe card expanding forever horizontally and vertically. I adjusted the column width to percentages but then when I add cards to a column, they overlap and cover up the previous card. How did you set your rows so that cards go below each other vertically? I’ve tried vertical stack cards but the swipe problem still persists.

I have exactly the same issue here.
I’m guessing you both are on firefox ?
I’ve tried to nail down what was wrong with my config, and it turns out, it’s a problem only on firefox, when I open HA on chromium, there isn’t any problem with swiper card

Hi. Thanks for sharing your experience. And yes, I am using Firefox on Windows.

But I also get the problems on the Home Assistant Android app, I don’t know which browser it uses underneath. I don’t see the JS error in the console, because there is no console, but I get the same behaviour where my cards show broken the first time, except if I am coming from a different dashboard into the one that has the card.

So, I don’t know if the problem is something in the browser or not, but it doesn’t seem to be only Firefox…

I have a big gap between the swiper card and the rest of my cards. What could be the problem ?

I think the height of the swiper card is always equal to the highest card that is part of the swiper group of cards. So if you have a very tall 3rd card in the swipe set, also the 1st and 2nd cards will show as very tall cards, and it looks strange because you don’t see why until you swipe.

So vandaag and the 2 cards below are in the swipe. They are equal in height. But the go below is I think 1,5 the size of the whole swipe card. It makes no sense…

I don’t know, then. If you are fluent with HTML and CSS you might gain some clues from using the browser’s inspector tools. Figure out which element is filling up the space, and then trying to edit the configs to change it.

He’s talking about the cards in the swipe card itself as swipe cards. You say that Vandaag and the two cards below it are in the swipe. But what cards show up when actually SWIPE? We don’t see thsoe cards on a screenshot. Most likely that card is taller, which is why the container is larger. You can prevent this by using autoHeight parameter.

parameters:
  autoHeight: true

Also: if asking for help, posting just a screenshot will only waste time of others trying to guess, like we’re doing now. Just post your relevant code and your issue with a screenshot, so others actually know what your setup is.

- type: custom:swipe-card
  cards:
      - square: true
        type: grid
        columns: 1    
        cards:
          - type: vertical-stack        
            cards:
              - type: horizontal-stack
                cards:      
                  - type: custom:mushroom-template-card   
                    primary: Vandaag  
                    secondary: >-
                      {% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %}
                      {{ (now().day) }} {{ (mon[now().month-1])}}
                    fill_container: true
                    layout: horizontal
                    multiline_secondary: false
                    card_mod:
                      style: |
                        :host([dark-mode]) {
                          background: rgba(var(--rgb-primary-background-color), 0.2);
                          height: 49px;
                        }
                        :host {
                          background: rgba(var(--rgb-primary-text-color), 0.025);
                          height: 49px;
                        }
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.totalpowerexportday
                    icon: mdi:weather-sunny
                    icon_color: yellow
                    name: " "
                  - type: custom:mushroom-entity-card
                    entity: sensor.totalpowerimportday
                    icon: mdi:power-plug
                    icon_color: purple
                    name: " "
      - square: true
        type: grid
        columns: 1
        cards:
          - type: vertical-stack        
            cards:          
              - type: horizontal-stack
                cards:      
                  - type: custom:mushroom-template-card
                    primary: Gisteren  
                    secondary: >-
                      {% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %}
                      {{ (now().day-1) }} {{ (mon[now().month-1])}}
                    fill_container: true
                    layout: horizontal
                    multiline_secondary: false
                    card_mod:
                      style: |
                        :host([dark-mode]) {
                          background: rgba(var(--rgb-primary-background-color), 0.2);
                          height: 49px;
                          }
                        :host {
                          background: rgba(var(--rgb-primary-text-color), 0.025);
                          height: 49px;
                        }
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.export_stroom_gisteren
                    icon: mdi:weather-sunny
                    icon_color: yellow
                    name: " "
                  - type: custom:mushroom-entity-card
                    entity: sensor.import_stroom_gisteren
                    icon: mdi:power-plug
                    icon_color: purple
                    name: " "
  - type: "vertical-stack"
    cards:
      - type: horizontal-stack
        cards:      
          - type: "custom:stack-in-card"
            cards:
  ...

indentation is not ok here, but ok at home. Between the swipe-card and the vertical stack next, there is a gap. That’s the one i want gone

Set square to false in the grid card config.

And what is idea behind using a vertical stack in a grid card that exist of just 1 column. Only the vertical stack will give you the same (and even beter result as it does not square the contents inside)

1 Like

If you don’t want a square, changing this would help:

      - square: true
        type: grid

Don’t see why you use square for gird, when you clearly don’t want a square card? Set that to false for all grid cards you don’t want to force as a square, but adapt to cards inside it.

1 Like

the swiped-card is just the same as the front swipe…

the square thing was the solution. Thanks guys

1 Like

@Bram_Kragten I know you’ve stopped supporting the plugin, but wanted to ask for your advise.

I’m running a lovelace dashboard on Fire HD 10 using Fully Kiosk Browser:

  • Android Version: 9 (Fire OS) (SDK 28)
  • WebView version: 104.amazon-webview-v104-5112-tablet.5112.114.50
  • Fully Kiosk Browser Version: 1.50

This is my lovelace config for the Swiper Card:

type: custom:swipe-card
start_card: 2
view_layout:
  grid-area: cam
parameters:
  autoplay:
    delay: 60000
  disableOnInteraction: false
  effect: coverflow
  navigation: null
  pagination:
    type: bullets
cards:
  - type: custom:webrtc-camera
    url: [redacted]
    muted: true
    ui: true
    poster: >-
      [redacted]
    intersection: 0.5
    background: false
    style: >-
      video {aspect-ratio: 16/9; object-fit: cover; object-position: bottom;}
      .mode {display: none;}
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        }
  - type: custom:webrtc-camera
    url: [redacted]
    muted: true
    ui: true
    poster: >-
      [redacted]
    intersection: 0.5
    background: false
    style: >-
      video {aspect-ratio: 16/9; object-fit: cover; object-position: bottom;}
      .mode {display: none;}
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        }
  - type: custom:webrtc-camera
    url: [redacted]
    muted: true
    ui: true
    poster: >-
      [redacted]
    intersection: 0.5
    background: false
    style: >-
      video {aspect-ratio: 16/9; object-fit: cover; object-position: bottom;}
      .mode {display: none;}
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        }

The issue is that Swiper Card content renders blank on page refresh and requires 2-4 further refreshes for the card content to appear. See it in action here (Google Photos link).

I’ve tried the following:

  • Removing Swiper Card and leaving only one of three custom:webrtc-camera cards. The issue disappears, suggesting that the issue is linked to the Swiper Card.
  • Updated Fully Kiosk Browser and Fire Tablet to the latest OS to ensure the latest version of webview is used. This didn’t fix the issue.
  • Tried toggling between hardware and software acceleration in Fully Kiosk Browser. This didn’t fix the issue.

This appears to be caused by some form of conflict between the Fully Kiosk Browser and Swiper Card, but I can’t point out what it is.

I’d really appreciate any help in finding the root cause.

Thanks in advance!