Makes sense, I have a separate dashboard user that I’ve been using. I can make that an admin to get it working in the meantime.
Thanks again!
edit: changed it and works great!
Thanks for testing. However, I was working on a solution, which can handle all users, but doesnt require an integration (seems the only option).
I guess I found a nice solution, which is working on my devices so far. The card will use an input_number helper as a proxy. in automations, you can set the input number helper to the index number and it will scroll to this card. But more in an upcoming release. I need to figure out the styling issues and correct them.
I think I will really create a beta branch for the new stuff.
Just a short update. I will release a new version with lots of bug fixes soon. I’m currently just testing, if I encounter issues with the new implementations.
- Fixed styling for navigation and pagination
Cards will align correctly for all dashboards
and card configurations - New implementation for setting slides in automations. Works for all users
- Forced hardware acceleration for swiping
Stay tuned.
updated to Version 0.8.0
Hello community, just a short update on the card and what I’m working on in the background.
I’m currently refactoring the code and implementing new features and bug fixes.
- The actual card sometimes has problems to detect the card in focus correctly. This is causing the pagination to being off and not updating properly. This should be fixed in the next update.
- One user posted an issue with home assistant navigation swipe card, which is propagating through the swipe-card, so that its not possible to slide. This will be also fixed in the next update.
- With the next update I will add following features:
- with the new release you will be able to decide, if the next card is visible or not. You can also change the gap between the cards and also how much (width) of the next card will be visible.
- sticky cards. In future you can decide which card should be sticky, if you scroll to it via input_number. Then also a reset button will appear to “unlock” it or you can set the input_number to 0 as alternative.
- timer. There will be also a timer, which automatically scrolls through the cards.
if you have any further ideas, let me know. I’m happy to check if we can integrate it.
4 Likes
Thanks for your project!
1 Like
Great project!
Suppose I want to display 3 cards alternately. Is there a way to display a single card only under the condition that a certain sensor state has a certain value?
As explanation. all cards you are adding in the cards: section will be indexed.
This means, they get numbers → 1 2 3 4 5 …
By creating a input_number helper and adding a specific card-ID to your config, you can bind the index to the input_number helper.
As example. If your css-swipe-card has a temp sensor kitchen as 2nd card, you can create e.g. an automation to set the specific input_number helper to 2, if the temp is > 24°C.
If the temp goes above your limit, the card will automatically scroll to card 2 and show the temp sensor kitchen card.
As a question for the next update.
One of the new features I did not mention is the option “styles”.
Yes, in addition to custom_css, you will get another option with styles to change the complete CSS code of the css-swipe card.
Why I want to keep both options?
- custom_css should be for beginners and ease to use customizations.
- styles: should be for advanced users with some knowledge of CSS as this can even break the whole slider function, but also gives users the possibility to create even more nice features and highly customize the the slider to their design.
So to make it easier for beginners, I would like to decrease the amount of variables in custom_css and limit it to variables for changing colors, size and icons of the buttons. Everything else just via styles.
As this might break some existing dashboards, I would like to get your opinions on this.
Just to mention again. This card was structured for my private use. Since I´ve released it, I get feature requests and ideas, which are not that easy to implement with the current structure. I would like to set it up to be able to add new features in future and also make it more trasnparent and easier for other developers to contribute to the code. This needs restrucuring and even changes in card-config options. I just do not want you guys (as users) to be frustrated.
let me know, what you think.
would anyone know if this card is at all templatable? I have a jinja template and before I rewrite it in JS I want to know that it would work.
This is what I have (essentially changing the cards: list dynamically based on the sensor output of nws_alerts (0-x)
- type: custom:css-swipe-card
cardId: YourUniqueCardName
template: slider-horizontal
auto_height: true
pagination: true
navigation: true
cards: |
{% set alerts = state_attr('sensor.nws_alerts', 'Alerts') %}
{% if alerts is not none and alerts | length > 0 %}
{%- for alert in alerts %}
- type: markdown
content: |
### {{ alert.Event }}
**ID**: {{ alert.ID }}
**Status**: {{ alert.Status }}
{%- endfor %}
{% else %}
No alerts found.
{% endif %}
In the actual state, neither Jinja, nor JS will work. CSS-swipe card expects a static config and array of cards. I can look into this topic, how _uch needs to be changed to make Jinja templates work, but this might need some fundamental changes to the code.
got it! Some props for the good work on this.
Hopefully you’ll get around looking into this as this is something that is entirely missing in HA. Kind of like a swipe card state-switch if you will 
@Nemu , this is really fantastic, thank you. Can I ask you something about your input_number helper? At present, it works to automatically swipe to the card corresponding to the number in the input_number helper? I was wondering if there was a possibility of doing this in reverse? My use case is that I have floorplans of the house in a a custom swipe card. I want to be able to swipe between the floors and conditionally bring in components into stacks around the swipe card conditional upon which card is showing. As you have a number assigned to each card, I was wondering if this is possible, I just can’t work out how to do it. Any help much appreciated!
Thanks for your feedback. In the current stage the card can’t do what you intend to. Tough I had a version in the past, which had the input number following the slider index, but this had some errors. Reason is, that you swipe pretty often and quickly and the card always need to do a service call to update the input number. These frequent updates lead to issues. But I will look into this again.
However, at the moment I’m pretty busy with refactoring the cars, which takes more time than I’ve expected. But in addition I will release a new further template and for the swipe card an option to make the slider stick to user defined cards, when they are triggered via input number.
Great card! Started using it todays inside custom:stack-in-card. No issues at all but I would love the ability to move pagination outside of css-swipe-card without it becoming invisible.
I’ve tried with card_mod but can’t figure it out.
I’ve had same idea and already implemented the option to move the pagination outside of the card. Sthis will be implemented in the coming update.
As mentioned, it takes more time, than I’ve expected, but I guess you I have some really nice upgrades implemented. I hope to release the update next week.
Hey, great card !
I just have one question : Is it possible to display multiple slide like swipe-card? Here is a picture to better understand my question
It’s always 1 slide = 1 card. If I use smalls buttons : 1 small button per slide with enormous gap between buttons… 
Thanks !
1 Like
Great work! Looking forward to test it out! In the meantime I did a quick and dirty and broke it free from the stack-in-card, gave it a transparent background, adjusted the z-index and moved it into position on top of my nested stack-in-card that I set to a fixed height to accomodate the height of the swipe-card.
This is the only thing holding me back from switching to this card tbh, need this feature too
1 Like