Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
532

No, in the end I gave up swiping and went with two rows of buttons that just drive a whole bunch of conditional cards in one view.

533

haha, thatā€™s basically what I did, I also use a drop down card but it is fuggly but usable

534

Seems like this card has been depreciated. Any good alternatives?

1 Like
535
536

For the sake of those like me who want to have a swipe card with coverflow effect, without the inner card shadow being hidden, here is the solution:

ex:

type: custom:mod-card
card:
  type: custom:swipe-card
  parameters:
    effect: coverflow
  cards:
    - type: button
      entity: sun.sun
    - type: button
      entity: zone.home
style:
  swipe-card$: |
    .swiper-container {
      margin: -2px !important;
      padding: 2px !important;
    }
2 Likes
537

Iā€™ve noticed that swiper nav doesnā€™t work when you have button cards that use custom_fields. For example, I have a button-card with a grid, and each grid element holds another button card. To do that, you must set up the tip level button card with cust fields and swiper touch controls seem to break on those. Anyone come across this?

538

I have this working with a number of room-cards, however I find I canā€™t tap any of my entities since adding them to the swipe-card.

Has anyone else experienced similar?

EDIT: I found if I right-click, left-click to dismiss the context menu, then click an entity the actions work properly. I have a copy of the card right on the lovelace and the entities all work fine there.

539

This card is awesome! 1 question. Is it possible to swipe in both directions from a default main card? i.e. iā€™d like a certain vertical stack to be the main page and to be able to reach other pages quickly by going left or right rather than right multiple timesā€¦

540

@Bram_Kragten, do you know what can be the cause of this error? It happens from time to time.

image
image370Ɨ699 18 KB

1 Like
541

After a full day trying to put the first swipe card, I always get erros.
Could someone please give some help here?

type: custom:swipe-card
cards:
- cards:
    - cards:
        - type: cover
		  entity: cover.persiana_da_cozinha
		- type: cover
          entity: cover.persiana_da_esquerda_2
		- type: cover
          entity: cover.persiana_da_direita
		- type: cover
          entity: cover.persiana_do_escritorio
		- type: cover
          entity: cover.persiana_do_quarto
		- type: cover
          entity: cover.persiana_do_quarto_da_lara
		- type: cover
          entity: cover.persiana_do_quarto_de_brincar
		- type: cover
          entity: cover.porta_garagem
      type: vertical-stack

    - cards:
	    - type: switch
          entity: switch.luz_do_pc
          icon: mdi:monitor
		- type: switch
          entity: switch.impressora_epson
          icon: mdi:printer-settings
        - type: switch
		  entity: switch.impressora_3d
          icon: mdi:printer-3d-nozzle-outline
        - type: switch
		  entity: switch.som_do_wc
          icon: mdi:speaker-wireless
        - type: switch
		  entity: switch.sauna
        - type: switch
		  entity: switch.cilindro
          icon: mdi:water-boiler
        - type: switch
		  entity: switch.maquina
          name: FrigorĆ­fico
          icon: mdi:fridge-outline
        - type: switch
		  entity: switch.tasmota
          icon: mdi:power-socket-jp
        - type: switch
		  entity: switch.impressora_3d_2
          icon: mdi:power-socket-jp
      type: vertical-stack
  start_card: 1
  parameters:
    spaceBetween: 20
    pagination:
      type: bullets
  type: 'custom:swipe-card'
542

This is no longer working?

543

Still working for me with the current release. You need only one card section and under cards you must add you types like in the docu is shown

1 Like
544

Getting this too everytime I open the app! Really hope thereā€™s a fix.

545

I just donā€™t get itā€¦

I copied an very simple example from here and replaced the entities.
I get ā€œNo card type foundā€ā€¦

  • I have in External Resources ā€œ/hacsfiles/swipe-card/swipe-card.js?ā€
  • swipe-card.js and swipe-card.js.gz at /config/www/community/swipe-card

What am I missing here?

546

Has anyone had any luck implementing something similar to a swipe_action?

Iā€™d love to be able to call a call-service action on swipe (to increment or decrement an input number and do some calcs).

The underlying swiperjs modulle has a nice array of events (Swiper API) which are called but these havenā€™t been exposed to HA as far as I can tell and unfortunately itā€™s a bit beyond my capabilities to access them although Iā€™ve looked into Config Template Card and State Switch which may offer some options.

For context - Iā€™m building a family calendar which essentially shows one day per slide. Iā€™d like to be able to swipe left or right to increment days, and display those days based on a calculation relative to todayā€™s date (+/- an increment).

1 Like
547

Any more updates to this code that makes it work smoother? Very interested! Thanks!

548

Hey! No. I decided to work on a mushroom inspired dashboard instead.

549

I have a weird issue: sometimes (so mostly not !) my swipe-card gives an error: t.setConfig is not a function

How can this been resolved ?

Screenshot_20221113-155716
Screenshot_20221113-1557161440Ɨ3120 380 KB

2 Likes
550

Maybe a silly question.

I have a list of media players that are inside a swiper card. When I load the dashboard that contains this element, the currently active media player should be automatically swiped to ā€” as I usually want to govern that player when I load the dashboard.

How do I achieve this effect?

551

This is about setting a ā€œstart_cardā€ option.
A possible solution could be using this card inside ā€œconfig-template-cardā€.
Check this and this - see if these bugs were fixed in the latest version.
No info was provided what bugs were closed in the latest version.