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
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
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.
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
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.
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:
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:
Note: This is from an entirely other software and its really small cause i stole it from a youtube video
Thanks for your help!
Solved my issue 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:
Do I need to set a parameter?
EDIT (SOLVED): Solved this issue too on my own. The horizontal stack prevented to scroll further.
Can you share your code please? Interested in this swiper
Here is the Update. This is still WIP and not productive on my side.
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.
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?
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”?
Possible workarounds are described on the link above.
answered: added a 3d option in the issue. have cards use their own (identical) box-shadow
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?