Have you tried the loop command. If you look into the documentation, there is a loop option. But i am not sure if it works.
Should be something like:
loop: true
That did not work for me. But hey, its not that big problem. It would be nicer to have but if I dont ā¦
1 Like
Hello,
Could you please give more details on this ācssMode: Trueā where did you put it?
Iām experiencing the same issue.
Furthermore, I have another issue.
I always need to clear the cache, or load another page from the iFrame to get the card (phone, or chrome) otherwise itās just an empty box.
At first page loading:
After selecting Energy page or reloading page while clearing cache:
Thank you in advance for your feedback.
...
cards:
- type: custom:swipe-card
start_card: 1
parameters:
loop: false
preloadImages: true
cssMode: true
observer: true
card_mod:
style: |
swipe-card{
background: transparent;
height: 100%;
width: 100%;
}
...
See above; just in the swiper card options!
Perfect, it s working like a charm, thank you.
1 Like
Hi folks,
coverflow does not work. It just swipes, but this rotate:50 etc does not work. Card_width also has no effectā¦ hmā¦
(I want to see one card in the middle an on every side one 50% rotate = coverflow)
Any ideas why? I cannot find the problemā¦
type: custom:swipe-card
card_width: 50%
parameters:
iOSEdgeSwipeDetection: true
slideToClickedSlide: true
effect: coverflow
grabCursor: true
centeredSlides: true
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
pagination:
type: bullets
navigation:
keyboard:
enabled: true
onlyInViewport: true
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/l
show_state: true
name: 'Wohnzimmer '
icon: mdi:sofa
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/esszimmer
icon: mdi:table-furniture
show_state: true
name: Esszimmer
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/kuche
name: KĆ¼che
icon: mdi:chef-hat
show_state: true
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/eg-flur
name: EG-Flur
icon: mdi:stairs
show_state: true
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/eingang
name: Eingang
icon: mdi:door-closed
show_state: true
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/wc
icon: mdi:toilet
name: WC
show_state: true
I implemented my heating controls with Better Thermostat. Now I want to use this in the swipe card. My problem now is that if I want to adjust the temperature manually with my finger, it always swipe immediately to the second page. Can i somehow block the card as soon as i press the slider so that the swipe is not executed?
I look forward to your experiences and suggestionsā¦ Thanks in advance.
type: custom:swipe-card
cards:
- type: custom:better-thermostat-ui-card
entity: climate.bt_bad_eg
set_current_as_main: true
disable_window: false
eco_temperature: 18
disable_summer: true
disable_eco: true
name: Bad EG
- type: custom:mini-graph-card
align_state: center
entities:
- color: '#FFC300'
entity: sensor.ble_bad_eg_temperatur
index: 2
name: Bad EG
parameters:
scrollbar:
hide: true
draggable: true
snapOnRelease: true
spaceBetween: 0
centeredSlides: true
effect: coverflow
pagination:
type: progressbar
keyboard:
enabled: true
onlyInViewport: true
Did you solve the problem with the slider? I have the same problem with Better Thermostat.
Adding cssMode: True as per my post above solved that particular problem for me!
Hello, I started to use the swiper card in my dashboard and I noticed one problem:
I have set the start_card to 2. (to be able to swipe in both directions)
When I switch this page using the swiper-card to a different page (without swiper-card) and back, then allways the last card is shown.
Can I get it to show the start_card 2?
( I also use the layout card on this page)
Using loop: true I get an empty page when comming back.
My dashboard is based on one picture element card in which I have the rest of the cards. Is it possible to put a swipe card in a picture element?
part of my code:
- type: custom:hui-element
cards:
- type: sensor
entity: sensor.domnasq_system_temperature
- type: sensor
entity: sensor.domnasq_system_temperature
style:
top: 50%
left: 50%
card_type: custom:swipe-card
Hi all, Iām using a custom tabbed and battery state card together. This allows me to display all my zigbee, zwave, and wifi battery devices in separate tabs with each of the battery devices in ascending order. I have a large number of zigbee devices and would love to be able to keep the ascending order but swipe to different pages (maybe in groups of 5-10 devices) to see the battery level of devices that have a higher percentage.
Does anyone know if I can use the swipe card to do this by defining how many entities in a list should display on each āpageā?
Hereās what it currently looks like.
1 Like
Perhaps anyone can help me.
I have a grid and want to swipe some cards in there. But the swipe cards doesnt fit in there
i cant find the right way how get it bigger
square: true
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /fire-tablet/2
icon: mdi:speaker
show_state: false
name: Musik
entity: input_boolean.musik
hold_action:
action: navigate
navigation_path: ''
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /fire-tablet/l
entity: light.lampen_wohnung
name: Licht
icon: mdi:lightbulb
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /fire-tablet/6
icon: mdi:air-filter
entity: input_boolean.heizen
hold_action:
action: call-service
service: climate.set_hvac_mode
target:
entity_id:
- climate.better_thermostat_bad
- climate.better_thermostat_esszimmer
- climate.better_thermostat_kuche
- climate.better_thermostat_schlafzimmer
- climate.better_thermostat_wohnzimmer
data:
hvac_mode: 'off'
name: Heizen
- type: custom:swipe-card
card_width: '250'
cards:
- type: button
tap_action:
action: navigate
navigation_path: /fire-tablet/luften
name: Haushalt
icon: mdi:home-analytics
columns: 4
Please can someone help me. How can I create a swipe card like the pics I posted below? So if you swipe to a room or category on the top and then it displays a swipe option below that you can swipe through and select a entity? Iāve asked the person who posted this on his FB page but he hasnāt responded. Do i need to create helpers or templates? I have no idea.
here is his link
āI've been revamping my mobile dashboard views. Here's what I have so far. | By Keith - Facebookā
Hello,
I use a combination of the swipe card and the tab card. This works fine on my android phone, but not on a windows machine. On windows (11) I canāt change the value (I donāt get a cursor) ?!
So this works fine :
type: custom:tabbed-card
styles:
'--mdc-tab-text-label-color-default': rgba(128, 128, 128, 0.8)
'--mdc-typography-button-font-size': 8px
options: {}
tabs:
- card:
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_datetime.tijdstip_alles_uitschakelen
name: All air conditioning off (again) at
tap_action:
action: none
hold_action:
action: none
attributes:
label: TEST
But this doesnāt :
type: custom:swipe-card
cards:
- type: custom:tabbed-card
styles:
'--mdc-tab-text-label-color-default': rgba(128, 128, 128, 0.8)
'--mdc-typography-button-font-size': 8px
options: {}
tabs:
- card:
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_datetime.tijdstip_alles_uitschakelen
name: All air conditioning off (again) at
tap_action:
action: none
hold_action:
action: none
attributes:
label: TEST
Is this a bug ?
1 Like
Hi
how did you create that card and the view?
how do you get the plugs and lights to show under the plugs or light option.
Thanks
HI, How did you get those colors on your swipe card?
thanks
Hey all.
So i have the following issue with the Mini Graph Card and Swiper. Whenever I click something in the input select/drop down menu the card shifts up and the select list doesnāt display properly like in the picture below.
Has anyone encountered this isuse?
Anyone here been able to move the pagination bullets below the cards? I tried this that works in console but not live:
card_mod:
style: |
.swiper-pagination {
position: static;
margin-top: 20px;
}
Hello, I am using this card with most standard parameters:
- type: custom:swipe-card
reset_after: 30
parameters:
scrollbar:
hide: false
draggable: true
snapOnRelease: true
Is it possible to get the resulting scrollbar above of my cards insted of below?
(similar to the progressbar, but still a scrollbar)