CSS-Swipe-Card - Simple Swipe card with lots of customization options

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.

  1. Fixed styling for navigation and pagination
    Cards will align correctly for all dashboards
    and card configurations
  2. New implementation for setting slides in automations. Works for all users
  3. 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.

  1. 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.
  2. 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.
  3. 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?

(post deleted by author)

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?

  1. custom_css should be for beginners and ease to use customizations.
  2. 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.