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

Share your Projects! Dashboards & Frontend
6

I tried and it didn’t unfortunately.

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 :grin:

1 Like
7

Ive already merged the commits. Works perfectly! Thanks for your contribution. Now I hope you like the card.

1 Like
8

Fixed some issues with the timer and pagination not working correctly.

9

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.

10

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.

1 Like
11

Here my next custom-card release. Swipe-Button-Card

Swipe-Button-Card

I would happy, if some of you could test it and send your feedback.

12

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!

14

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.

1 Like
15

New Version v0.7.7

CSS-Swipe-Card

Change_log:

  • added event listener to integrate swipe-card in automations
    Read the documentation for further information
  • changed auto_height code to make it more robust
16

You’re amazing, thanks so much!

17

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?

18

It should run on all devices. It is working on my side. But after installation I had to clear browser cache on all devices.
But I will recheck again.

1 Like
19

Can you do me a favor and test something.

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.

  1. Pagination and navgation styling is totally off
  2. 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!

20

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.

21

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.

1 Like
22

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!

24

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.

25

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.

26

updated to Version 0.8.0

27

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