The “gap” config is from my personal setup. This is a left over, as I did not use it as you guys do.
In the next update you can adjust the size of the next visible card (hoch much) and also the gap between the cards. Both independent from each other.
I’m sorry, but I’m sick since some days and I did not have the time to finish the update. But I promise, it will be soon.
No problem, take care 
Thank you for the work on this!
I’ve been trying to style the bullets further by changing their alignment and shape.
You mentioned that custom_css and styles are separate to allow more css customization with style.
Can you share a working example with style? Despite some tests I’ve not been able to make any change so far
Hello nice card ! What’s your meteo card ?
Can somebody please help me with this problem.
So I wanted to create a card for my energy usage and make the card scroll if there is energy usage. But this doesn’t work.
Here is my code:
type: custom:css-swipe-card
cardId: swipe-card-energie
pagination: true
height: null
index: input_number.swipe_card_energie
custom_css:
"--pagination-bullet-active-background-color": white
"--pagination-bullet-background-color": transparent
"--pagination-bullet-border": 0.2px solid
cards:
- type: custom:button-card
name: |
[[[
return entity.state + ' kW'
]]]
entity: sensor.02_production
icon: mdi:solar-power-variant
label: Overproductie energie
show_label: true
show_state: false
custom_fields:
diagram:
card:
type: custom:mini-graph-card
entities:
- sensor.02_production
show:
graph: bar
name: false
icon: false
state: false
card_mod:
style: |
ha-card {
border-radius: 0px;
background: transparent
}
styles:
card:
- padding: 0px
- background: green
- height: 90px
img_cell:
- justify-self: start
- width: 100px
- height: px
- position: absolute
icon:
- width: 50px
- color: white
name:
- justify-self: start
- font-size: 16px
- font-weight: 500
- position: absolute
- left: 78px
- top: 30px
label:
- justify-self: start
- font-size: 14px
- opacity: 0.7
- position: absolute
- left: 80px
- top: 50px
custom_fields:
diagram:
- width: 240px
- position: absolute
- left: 250px
- top: 25px
- type: custom:button-card
name: |
[[[
return entity.state + ' kW'
]]]
entity: sensor.01_house_consumption
icon: mdi:transmission-tower-export
label: Energieverbruik
show_label: true
show_state: false
custom_fields:
diagram:
card:
type: custom:mini-graph-card
entities:
- sensor.01_house_consumption
show:
graph: bar
name: false
icon: false
state: false
card_mod:
style: |
ha-card {
border-radius: 0px;
background: transparent
}
styles:
card:
- padding: 0px
- background: red
- height: 90px
img_cell:
- justify-self: start
- width: 100px
- height: px
- position: absolute
icon:
- width: 50px
- color: white
name:
- justify-self: start
- font-size: 16px
- font-weight: 500
- position: absolute
- left: 78px
- top: 30px
label:
- justify-self: start
- font-size: 14px
- opacity: 0.7
- position: absolute
- left: 80px
- top: 50px
custom_fields:
diagram:
- width: 240px
- position: absolute
- left: 250px
- top: 25px
parameters:
pagination:
type: bullets
alias: 2e kaart bij energieverbruik
description: zelfde
trigger:
- platform: numeric_state
entity_id:
- sensor.01_house_consumption
above: 0
condition: []
action:
- service: input_number.set_value
metadata: {}
data:
value: 2
target:
entity_id: input_number.swipe_card_energie
mode: single
If somebody knows whats wrong please tell me.
Thanks!
Is it possible to loop when moving cards? I mean I move from card 1 to card 2 and then move in the same direction to card 1.
Great card, thanks!
One question, how do I make “styles” work? I want to set the width of the whole swipe card to something other than default.
I have two cards in the swipe card. I tried to set their width using card_mod and then the whole swipe card got really wide. It is like the swipe card don’t like the width property of the child cards.
But I can’t find any mention of the width property anywhere in the docs. No you mentioned that we had “styles”
I added
styles:
card:
- width: 200px
But it is not working. I also tried “style”.
And finally, just a tip from a fellow developer who has done a few cards. Skip the dreaded shadow doms and put everything in a simple ha-card structure. Then it is very easy to style without any custom properties.
cheers!
What do you mean by not working. If it is that nothing uupdates on the custom:button-card then it will be the same as button-card on Browser Mod popups. See Browser Mod issue for explanation and workaround.
Hello guys. Sorry for not releasing any updates to this card in the last months. I was working hard on the implementation, when my complete server crashed. In addition, we had a rough time as a family, as our little boy got sick, needed surgery and so on. My family is my priority, so everything else needed to be on hold. Meanwhile, I build up a new server, so when I find free time, I will work on the code to implement the promised fixes and features.