Lovelace: Swiper card

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

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

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

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

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

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

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!

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

Can you share your code please? Interested in this swiper

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

2 Likes

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

has no one a idea?

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

Anyone know of a non-deprecated alternative to this?

6 Likes

Is there a way to set parameters for an individual card within the swipe-card? For example, it will be nice to specify how much time to stay in a particular slide within a slideshow.

Also, is there a way to hide a card?

Is anyone seeing a problem “no box-shadows are displayed for the card”?

image

Possible workarounds are described on the link above.

answered: added a 3d option in the issue. have cards use their own (identical) box-shadow

yes, use a type: conditional, see: Conditional Card - Home Assistant

Check my answer, it does not help, the parent “swipe-card” is clipping the inserted cards due to its “overflow: hidden” style.
The only way is to put the whole “swipe-card” into some card with box-shadow or add box-shadow to the “swipe-card” itself.

Did you ever figure this out?