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?
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… 
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 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!