This is exactly what I needed but doesn’t work on any of my tablets (3 different Samsung tablets) it either stops in the middle in between pages or just scrolls right back. PC browser is fine.
Any idea on a fix? Also getting I get this t.setConfig is not a function error like jesperB above
Using HA via Fully Kiosk app and the t.setConfig error always happens on a refresh - works fine until the page is refreshed and happens with multiple picture-glance cards added to one swipe card.
Mine was doing this, too, when I first started playing with swipe cards but it seems to be working nicely now. Instead of using “card_width” in the main section try adding a style entry and adding your width: 90%" there (may require Card-Tools in Hacs). Here’s a snippet of my working slider card:
- type: custom:swipe-card
start_card: 1
parameters:
effect: coverflow
grabCursor: false
centeredSlides: true
coverflowEffect:
rotate: 50
depth: 100
modifier: 4
slideShadows: true
style:
left: 50%
top: 65%
width: 96%
opacity: 100%
cards:
- type: whatever-card
Additionally, I do have my own question: Is it possible to use a swipe action to trigger a script without actually cycling through cards? Basically I want to mimic Spotify within my dashboard where swiping left and right to moves to the previous or next song. Honestly don’t think this is the card for that, but it’s always worth asking.
Hi,
I’m showing Grafana graphs with the swipe card, is it possible to load the graphs one by one when swiping instead of loading them at once? I was hoping the “lazy” parameter would do that but couldn’t make it work.
Hello everybody. First of all, thanks a lot for this card, it is really super cool. However, I have a small issue. My swiper card is missing shadows to the right (see blue arrow) unlike all other cards in lovelace. I know it is super minor but it is super noticeable when you have seen it. Anybody knows how to fix?
Hey guys,
Is it possible to have a ‘swipe option’ within my excisting card? What i would like is to ‘swipe’ for instance my livingroom button and have it switch from temperature graph to humidity. Theres a screenshot and an example of the code that im working on.
type: custom:button-card
custom_fields:
graph:
card:
type: custom:mini-graph-card
font_size: 50
align_state: center
entities:
- sensor.toon_current_temperature
show:
labels: false
fill: true
name: false
icon: false
color_thresholds:
- value: 16.5
color: '#005f73'
- value: 17
color: '#94d2bd'
- value: 17,5
color: '#e9d8a6'
- value: 18
color: '#ffba08'
- value: 18.5
color: '#faa307'
- value: 19
color: '#f48c06'
- value: 19.5
color: '#e85d04'
- value: 20
color: '#dc2f02'
- value: 20.5
color: '#d00000'
- value: 21
color: '#9d0208'
- value: 21.5
color: '#6a040f'
- value: 22
color: '#370617'
- value: 22.5
color: '#03071e'
styles:
custom_fields:
graph:
- filter: opacity(40%)
- overflow: unset
card:
- overflow: unset
- font-size: 15px
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: light.living_room
size: 20%
card_mod:
style: |
ha-card {
color: black
font-size: 10px
}
hold_action:
action: navigate
navigation_path: /lovelace/lights-livingroom
tap_action:
action: toggle
What have you tried so far yourself? What issues are you having that it’s not working?
I was able to have that whole button slide and display the humidity. However, i would like to slide it and have only Celcius and graph change to Humidity and graph. The name (entity) livingroom should be in a fixed position.
my tryout below;
type: custom:swipe-card
parameters: null
spaceBetween: 8
scrollbar: null
hide: false
draggable: true
snapOnRelease: true
cards:
- type: custom:button-card
custom_fields:
graph:
card:
type: custom:mini-graph-card
font_size: 50
align_state: center
entities:
- sensor.toon_current_temperature
show:
labels: false
fill: true
name: false
icon: false
color_thresholds:
- value: 16.5
color: '#005f73'
- value: 17
color: '#94d2bd'
- value: 17,5
color: '#e9d8a6'
- value: 18
color: '#ffba08'
- value: 18.5
color: '#faa307'
- value: 19
color: '#f48c06'
- value: 19.5
color: '#e85d04'
- value: 20
color: '#dc2f02'
- value: 20.5
color: '#d00000'
- value: 21
color: '#9d0208'
- value: 21.5
color: '#6a040f'
- value: 22
color: '#370617'
- value: 22.5
color: '#03071e'
styles:
custom_fields:
graph:
- filter: opacity(40%)
- overflow: unset
card:
- overflow: unset
- font-size: 15px
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: light.living_room
size: 20%
card_mod:
style: |
ha-card {
color: black
- type: custom:button-card
custom_fields:
graph:
card:
type: custom:mini-graph-card
font_size: 50
align_state: center
entities:
- sensor.philips_sml001_fde90002_illuminance
show:
labels: false
fill: true
name: false
icon: false
color_thresholds:
- value: 16.5
color: '#005f73'
- value: 17
color: '#94d2bd'
- value: 17,5
color: '#e9d8a6'
- value: 18
color: '#ffba08'
- value: 18.5
color: '#faa307'
- value: 19
color: '#f48c06'
- value: 19.5
color: '#e85d04'
- value: 20
color: '#dc2f02'
- value: 20.5
color: '#d00000'
- value: 21
color: '#9d0208'
- value: 21.5
color: '#6a040f'
- value: 22
color: '#370617'
- value: 22.5
color: '#03071e'
styles:
custom_fields:
graph:
- filter: opacity(40%)
- overflow: unset
card:
- overflow: unset
- font-size: 15px
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: light.living_room
size: 20%
card_mod:
style: |
ha-card {
color: black
font-size: 10px
}
hold_action:
action: navigate
navigation_path: /lovelace/lights-livingroom
tap_action:
action: toggle
font-size: 10px }
hold_action:
action: navigate
navigation_path: /lovelace/lights-livingroom
tap_action:
action: toggle
Try reversing it. Instead of swipe-card as main container, use the custom field to you put the swipe-card in. So instead of the graph, put swipe-card there and then the graphs in there. That will give you one button card where the graphs are swipable.
You may need to play around with the custom field stylings.
1 Like
Thanks for your fast reply, i tried that but i cant get it to work 
I dont have anything because i cant even get something to work that fits a test 
sorry
Ok, then I suggest you read the ReadMe first. There are very basic and clear examples in the first post on this thread. Even examples with multiple graphs in one swipe card. Try that in button card custom_field.
I’ll read that again, however, this is different though. I want to have only the graph sliding and not the whole button, which makes it an interesting challenge.
Yes, which you can achieve by inserting the swipe-card in the custom_field like I explained. And then put the graphs inside that swipe-card. You say you can’t get it working, but why aren’t you trying that…?
If you at least tried that, you’d have a piece of code people can help further. Saying you don’t have a code only tells me you haven’t even tried it and just want a complete working code.
Fair enough. This is what i’ve got now:
type: custom:button-card
custom_fields:
graph:
card:
type: custom:mini-graph-card
font_size: 50
align_state: center
entities:
- sensor.philips_sml001_c6710202_temperature
show:
labels: false
fill: true
name: false
icon: false
color_thresholds:
- value: 16.5
color: '#005f73'
- value: 17
color: '#94d2bd'
- value: 17,5
color: '#e9d8a6'
- value: 18
color: '#ffba08'
- value: 18.5
color: '#faa307'
- value: 19
color: '#f48c06'
- value: 19.5
color: '#e85d04'
- value: 20
color: '#dc2f02'
- value: 20.5
color: '#d00000'
- value: 21
color: '#9d0208'
- value: 21.5
color: '#6a040f'
- value: 22
color: '#370617'
- value: 22.5
color: '#03071e'
styles:
custom_fields:
type: custom:swipe-card
parameters: null
spaceBetween: 8
scrollbar: null
hide: false
draggable: true
snapOnRelease: true
cards:
- type: custom:button-card
custom_fields:
graph:
card:
type: custom:mini-graph-card
font_size: 50
align_state: center
entities:
- sensor.philips_sml001_c6710202_illuminance
show:
labels: false
fill: true
name: false
icon: false
graph:
- filter: opacity(40%)
- overflow: unset
card:
- overflow: unset
- font-size: 15px
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: light.kitchen
size: 20%
icon: mdi:silverware-fork-knife
name: null
hold_action:
action: navigate
navigation_path: /lovelace/lights-kitchen
tap_action:
action: toggle
Kitchen entity disappears and there is no sliding component (3rd button)
This will not work, as the indentation is off. You need to get two (2!) spaces for every new configuration tag.
In your case, most entries (but not all?!) after styles are wrongly indented.
And you should take a look at the documentation of button-card again. You’re mixing things a little bit.
It doesn’t work because you still don’t use swipe-card inside custom_field. You have it under styles, but not under the custom_field itself. You’re mixing up the options, which causes the card to break/disappear. I advise you to dive into button-card since you’re mixing up the variables.
I can understand this can be overwhelming since you’re trying to combine/nest multiple cards. I would advise you to first create a swipe-card with the graph cards in it to see if you have that part working.
Then read up on button-card to understand how the custom_field option works. In your old code you use custom_field as it’s intended. So I’d advise to study your own code and then try the working swipe-card (which has graph cards in it) in custom_field.
TL;DR: you’re not using the custom_field options of button-card correctly. Create a working swipe-card with graph cards first. Then insert that in the custom_field. Small steps will get you there.
Any reason this Swiper card would be slow to load? I’ve reinstalled Swiper in HACS, restarted HA, and neither works to improve the load time. The card itself works great, but when I open Home Assistant on my iPhone (12 Pro w/ latest updates), everything except the Swiper card loads, then about 20 seconds later (even if I swipe down to refresh) it finally appears.
Any idea what would be causing this initial load delay? It works fine if I don’t close the app completely and just come back to it, but that initial load is killing my my overall usability since it’s an important part of how my dashboard works. 
Great card, thanks a lot!
Just started using it in combination with state-switch card for iPhone.
One thing bothers me - why there is a gap when using loop: true option?
After swiping the last card - I see a blank card, need to swipe again to see the 1st card.
- type: custom:swipe-card
parameters:
loop: true
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
- sun.sun
- type: entities
entities:
- sun.sun
- sun.sun
- sun.sun
- type: entities
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
Ildar_Gabdullin, maybe try adding the start_card parameter to tell it what your first card is so it knows where to loop back to?
- type: custom:swipe-card
start_card: 1
parameters:
loop: true
cards:
Still need to figure out why the Swipe card doesn’t load right away for me though. Even when it only contains a simple single button on one slide, it still takes 10-15 seconds to load and appear on the screen.