here is my CSS-Swipe-Card, which is my first custom card for Home Assistant. I´ve created it for my personal use in the first place, but as it´s working really well, I´m sure others might enjoy it too.
Yes, there is already a swiper-card. First, this card is amazing and comes with lots of features. So why a new card?
my card is based on CSS and JS and is not based on a third party library
With CSS-Swipe-Card you can use custom:button-card with nested buttons and still swipe it without issues. This is not possible without a workaround with Swiper.
You get lots of customaziation features with CSS-Swipe card.
Adjust pagination, navigation and other buttons to your design.
This card can be even triggered through an automation (custom_event) to show a specific slide, which offers lots of optins to integrate this card.
As I´m not a full time developer (but an IT guy), my code might not be the “best”, but its working very well. I had no issues so far.
So I hope you enjoy it and soon, I will release another custom card with a sliding feature. So stay tuned.
Yes, right now, you need to load the file via resources.
download the file and put it in your www folder.
open settings → dashboard → 3 dots top right → resources. Click on add resource. Add the path to the .js file.
/local/css-swipe-card.js
then clear browser cash and open home assistant.
I will look into getting it to work via hacs.
Appreciate your feedback and support!
I tried changing the name of the folder from src to dist, containing the .js file based a review of other github repositories and this appears to have worked now.
I have submitted another pull request based on that testing. Let me know if thats worked for you
Looks nice! I’m looking for a swipe card that lets me change to a specific page based on an automation or condition. Would this be possible with your card?
I was able to do a super complex version of this with swiper in the past with browser mod but looking for something simpler and better integrated with home assistant.
Thanks for your feedback. I need to check in more detail, if I can integrate something like this.
Im already working on implementing a taps version, which lets you create taps (icon name…( and lets you navigate through sub-pages.
I will also look into the automation stuff.
If it’s a pain to fully integrate with automations or add condition triggers then then i still think it can be done simply with browser mod, just make a javascript API easily accessible to jump to a specific index. Appreciate it!
Got it. Will make a beta release soon.
Then its possible to define a cardId for each slider. The card is listening on the hass event bus for the event css-swipe-card-scroll plus its ID.
With a small script you can then fire the event with card index and use it in any automation to scroll to a specific page.
I hope my explanation was not too complicated, as its pretty easy to set up.
Sorry to follow up so quickly - hooked up and worked great when i had a dashboard up running on the same PC, but didn’t change to the new index on any other dashboards running on my phone/tablets. I’m not super familiar with HASS events but seems like it should work running on a dashboard anywhere, any thoughts?
Im using the new section layout for my dashboards. With the section layout the cards seems to work very well. Ive created a test layout with masonry view and and added a card.
There a see couple of issues.
Pagination and navgation styling is totally off
Triggering events doesnt seem to work properly.
can you create a section dashboard and test if this works incl. event triggering? Then I need to investigate further and correct the code.
Thanks!
Is the section layout new? I believe my problem is the same using the “one card” layout with a bunch of horizontal/vertical stack cards. I also noticed pagination/navigation for those appear at the outermost edges of the parent card versus the nested swipe card. If there are multiple swipe cards they look like they cover each other/don’t work.
Yes, Im currently investigating. Problem is, that I’m using position absolute in css for the nav and pagination buttons and in masonry view the buttons use the full width of the ha container instead of just the card container. Not intended. In sections view (new dashboard layout type), it’s working fine.
I also found the issue, why the event is not triggering the card to scroll on all devices. It’s not the device, it’s the user. In Home Assistant just admins can subscribe to the event bus and listen. Otherwise it’s necessary to create an integration and add a new event type to the event-bus, which acts like a proxy. I just found one comment on this topic and need to check further. I’m sorry, but I was not aware of this and it was working flawlessly on all my devices as I just use one user at the moment.
