Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
490

Hi all.

I start using swiper card only a few days ago.
I have a problem to show swiper on mobile. Using the HA app the swiper as not show.
In the images below you can see the view on mobile and on PC

DashMobile
DashMobile606×1280 41 KB

DashPC
DashPC1134×803 85.8 KB

Another problem seems to be the refresh, after a while the swiper also disappears from the PC view and I have to refresh the view

You can help me?

Regard,
Marco

2 Likes
491

Is this card not updating anymore?

492

Hi everyone,
how can I make the background for the cards in red as the other (no background). They are all with swipe card. Thanks

Schermata 2022-01-16 alle 17.54.48
Schermata 2022-01-16 alle 17.54.481920×591 70.5 KB

493

No: custom-ui/swipe-card at master ¡ bramkragten/custom-ui ¡ GitHub

494

Last updated 3 years ago.

495

That’s not the correct Github repo. It’s been moved a long time ago to:

which is the HACS repo as well.

The last update was on june 2020, so 1,5 years ago (version 4.0). Not much activity by the developer. but that version (from HACS) is better and more updated than the one you linked (which is still linked in the first post by the creator).

I really hope they just integrate swiper card as a core HA card. I believe Bram works with core as well. I’m really worried what will happen to swiper-card when a future HA update breaks the card and the dev doesn’t update it… Gonna mess up my interface by a big amount.

496

Bram is the main Frontend- developer…

Though the card wasn’t updated recently, I cant imagine Bram not fixing his own card if and when necessary :wink:

1 Like
497

i have an issue with the swipe-card where it would just zoom in/enlarge in grid layout, works fine in masonry template or any other than grid.

my ui raw config for the whole dashboard

recorded a view of the ‘zoom’ issue

498

I don’t think this has to do with swiper card directly, but with how you setup the grid.

To make sure, replace the swiper card with an temporary button card to test. If that shows the same behavior, it’s your grid layout and you need to investigate that further.

If a button card does work as you expect, then it’s swiper card and you can create a ticket on Github. Keep in mind though, the card was last updated 1,5 years ago.

Perhaps a workaround would be to insert the swiper card inside a vertical-stack card. Then that card will be loaded by layout card first.

1 Like
499

after some testing, it’s prob something clashing with the grid + swiper card, as I have tried it with other codes with the same problem, but the custom button card works fine without a swiper card. ill try inserting the swiper card inside a vertical-stack card a try and see if that fixes it, thanks :slight_smile:

edit: just adding a vertical-stack didn’t work so I added a horizontal-stack + a grid on top of that and it fixed the issue

500

Hi everyone, does anyone know how to force swiper card to remain on the current card? I am currently using swiper to scroll between two picture elements cards displaying each floor of my home. The issue I am running into is that the view automatically resets to the first card upon any button press or state change taking place on the second card. I have looked at the YAML for others who I have seen running a similar setup and are not encountering this issue but cannot identify what I am doing incorrectly. I would greatly appreciate any pointers anyone can offer!

This is my initial lovelace config (excluding sidebar). I have tried messing around with the initialSlide and start_card parameters but can’t seem to find the trick:

type: custom:config-template-card
entities:
  - all my entities
card:
  type: custom:swipe-card
  parameters:
    initialSlide: 0
    spaceBetween: 0
    direction: vertical
    autoHeight: true
    effect: fade
  cards:

And in case it is helpful, this is the YAML from the second card where the issue is occurring. I only have a default image and a single light overlay/button while I get things up and running.

    - type: picture-elements
      image: /local/floorplan/BasementDefault.png
      elements:
        - type: image
          entity: light.studio_main_lights
          style:
            top: 50%
            left: 50%
            width: 100%
            mix-blend-mode: lighten
            transform: translate (-0%, -100%)
            opacity: >-
              ${ states['light.studio_main_lights'].attributes.brightness / 255
              }
          state_image:
            'off': /local/floorplan/TransparentLayer.png
            'on': /local/floorplan/StudioPotLights.png
          tap_action:
            action: none
          hold_action:
            action: none
        - type: image
          entity: light.studio_main_lights
          style:
            top: 55%
            left: 60%
            width: 5%
            transform: translate (-0%, -100%)
          state_filter:
            'off': brightness(80%0 saturate(0.8)
            'on': brightness(130%) saturate(1.5)
          state_image:
            'off': /local/floorplan/Icons/icon_light_spot_off.png
            'on': /local/floorplan/Icons/icon_light_spot_on.png
          tap_action:
            action: toggle
          hold_action:
            action: call-service
            service: browser_mod.popup
            service_data:
              title: light slider
              card:
                type: custom:light-popup-card
                entity: light.studio_main_lights
                brightnessWidth: 150px
                brightnessHeight: 400px
                fullscreen: false
                sliderTrackColor: rgba(25, 25, 25, 0.9)
                sliderColor: '#c7c7c7'
                borderRadius: 1.7em
                hideIcon: false
501

Lot of folks seem to be getting this t.setConfig error - I was also in the same boat and hence wasn’t able to use this card.
Buf one of the comments made in the posts above related to error being due to underlying cards not being loaded upfront made me go on the right track.
To solve this I used the:

card to have the underlying cards pre-loaded when lovelace is brought up. My underlying cards are media related and my config for lovelace has this as the first 3 lines…

preload_cards:
  - media-control
  - 'custom:swipe-card'

Once I did this it solved my problem and I don’t see the t.setConfig error or even if it’s visible initially for some transient time it recovers within a few seconds by itself without hitting the refresh button…
Hope it helps folks running into this issue and not able to use this wonderful custom card option.

2 Likes
502

Hi all,

I have a real headache at this stage. All i want is Homekit Style buttons in swiper card. For that i use the custom swiper card and the custom button card. Issue is the size. I want them square but i get them only as a rectangle. Or a mix like in this screenshot:

image

This is the code:

type: custom:swipe-card
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
    slidesPerView: 4
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: light.buro
        name: BĂźro Decke
        icon: mdi:lightbulb
        show_state: true
        styles:
          card:
            - width: 100px
            - height: 100px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
          img_cell:
            - align-self: start
            - text-align: start
          name:
            - justify-self: start
            - padding-left: 10px
            - font-weight: bold
            - text-transform: lowercase
          state:
            - justify-self: start
            - padding-left: 10px
        state:
          - value: 'off'
            styles:
              card:
                - filter: opacity(50%)
              icon:
                - filter: grayscale(100%)
      - type: custom:button-card
        entity: light.buro
        name: BĂźro Decke
        icon: mdi:lightbulb
        show_state: true
        styles:
          card:
            - widht: 100px
            - height: 100px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
          img_cell:
            - align-self: start
            - text-align: start
          name:
            - justify-self: start
            - padding-left: 10px
            - font-weight: bold
            - text-transform: lowercase
          state:
            - justify-self: start
            - padding-left: 10px
        state:
          - value: 'off'
            styles:
              card:
                - filter: opacity(50%)
              icon:
                - filter: grayscale(100%)

The idea is to have favorites on top to swipe through. Should look similar to this:

image

Note: This is from an entirely other software :slight_smile: and its really small cause i stole it from a youtube video :wink:

Thanks for your help!

504

Solved my issue :slight_smile: was a typing error.

But I have now a new issue. The buttons are snapping back and don’t stay in place. Here is what I mean:

Bild

Do I need to set a parameter?

EDIT (SOLVED): Solved this issue too on my own. The horizontal stack prevented to scroll further.

1 Like
505

Can you share your code please? Interested in this swiper

506

Here is the Update. This is still WIP and not productive on my side.

2 Likes
507

Hello,

first its a very nice card.

perhaps someone can me help with two problems, the first, he cuts my shadows of the card at the bottom and the right side, the left side, and a little bit at the top.

shadow_cut

the second problem, is it possible to move the bubbles a little bit deeper ? or to the right side?

here is my code:

- type: custom:swipe-card
    parameters:
      centeredSlides: false
      slidesPerView: auto
      spaceBetween: 8
      parameters: null
      pagination:
        type: bullets
    cards:
      - type: horizontal-stack
        cards:
          - type: entity
            attribute: distance
            style: |
              ha-card {
                background: rgba(190, 190, 190, 0.2);
                height: 330px;
               } 
            entity: sensor.waze_marc_time_to_home
            name: Entfernung
            unit: km
          - type: entity
            attribute: distance
            style: |
              ha-card {
                background: rgba(190, 190, 190, 0.2);
               } 
            entity: sensor.waze_julia_time_to_home
            name: Entfernung
            unit: km
      - type: horizontal-stack
        cards:
          - type: entity
            icon: mdi:clock-time-eight
            style: |
              ha-card {
                background: rgba(190, 190, 190, 0.2);
              } 
            entity: sensor.waze_marc_time_to_home
            name: Dauer
          - type: entity
            icon: mdi:clock-time-eight
            style: |
              ha-card {
                background: rgba(190, 190, 190, 0.2);
              } 
            entity: sensor.waze_julia_time_to_home
            name: Dauer
508

has no one a idea?

509

Did you ever get this to work? I am trying the same thing and have successfully embedded a swipe card in a button card, but the swipe function doesn’t work at all, it only shows the start card with no option to swipe

510

Anyone know of a non-deprecated alternative to this?

6 Likes