What’s the syntax and formatting for setting card specific autoplay delays? Over here in the docs it says it can be done, but I would need a YAML example for how to implement this.
If you need to specify different delay for specific slides you can do it by using
data-swiper-autoplay(in ms) attribute on slide.
<div class="swiper-slide" data-swiper-autoplay="2000">Hi!
Really loving this! A super sweet addition to my dashboard!
Although I have a problem which I’m woundering if anyone know how to fix.
I have a dashboard setup on a raspberry pi 3 using raspbian and its chromium browser but the issue also remains in the home assistant app on my android phone when trying there.
Whenever I swipe across the screen, once I release it acts as a click on the card I “held onto” while sliding, either performing a button press or alternativly bringing up the info window for that entety.
For example, I’ve added the ability to swipe between two different weather info cards for both my homes but whenever I release my finger off the screen it brings up the window showing all information from that weather card.
Alternativly I have some buttons activating some light scenes and another set of buttons I can swipe to that controls individual light instead. But swiping back and forth between these causes the button I “held onto” to activate once I let go of the screen, accidentally activatings scenes or turning on/off lights by simply just swiping.
Is there a way to stop this?
Hi all, I’m attempting to figure out how to implement hash control to this swipe-card. Using the below parameters and manually inserting data-hash="p1 , data-hash="p2" into the swiper-slide-active cards html, I can change the hash on swipe and using the navigation arrows. These changes are reflected in the three button cards above.
(Screen grab GIF attached)
What doesn’t work is if I change the browser hash from one of buttons, the swiper-card will not update or listen to this change.
is there any way to make swiper-card listen for hash changes from buttons etc? (Similar to custom:button-card or custom:state-switch)
is there any way to define data-hash=" " within the YAML config for each card? Without manually inputing this in the developer console it just adds #null to the url for ALL cards.
This would be super exciting if this could work and opens up a lot of UI/Navigation possibilities.
Any help is hugely appreciated!
- type: 'custom:swipe-card'
view_layout:
grid-row: 3
start_card: 1
parameters:
hashNavigation:
enabled: true
watchState: true
onHashChange: true
replaceState: true
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: 1
coverflowEffect:
rotate: 50
stretch: 50
depth: 50
modifier: 1
slideShadows: true
pagination:
type: 'bullets'
navigation:
anyone using either light-popup-card or thermostat-popup-card wrapped in a swipe-card, with success?
when I put my popup cards (code below) inside the swipe card, I lose the ability to control the individual lights.
- type: vertical-stack
cards:
# Markdown for Lights Stack
- type: markdown
content: |
# Lights
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 16px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
# Picture Elements to hold light popup cards
- type: picture-elements
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
padding: 16px;
font-size: 14px !important;
box-shadow: none !important;
height: 260px !important;
}
elements:
# Living Room
- type: 'custom:light-popup-card'
card_mod:
style: |
ha-card {
}
h4 {
font-size: 14px !important;
color: var(--primary-text-color); }
entity: light.living_room
icon: 'mdi:lightbulb'
hideState: null
sliderColor: var(--accent-color)
brightnessHeight: 140px
brightnessWidth: 50px
fullscreen: true
sliderThumbColor: var(--accent-color)
sliderTrackColor: '#3a3c55'
switchHeight: 150px
switchWidth: 50px
displayType: slider
style:
top: 80px
left: 60px
height: 200px
- type: 'custom:button-card'
card_mod:
style: |
ha-card {
font-size: 14px !important;
}
name: Living
style:
top: 205px
left: 60px
width: 80px
Hi all, working on wrapping some custom button cards in a swipe view like so
This has always been the case with hold actions inside swiper card. Also affects sliders, since you have to hold and touch. I’m guessing you’re using on desktop/laptop. See my workaround I figured out here: A different take on designing a Lovelace UI - #700 by ASNNetworks
I use popup slider cards inside swiper card successfully with this workaround.
I’m trying to find a way to dynamically add cards to the Swiper card, so new messages and alerts can be displayed and autoplayed through. Does anyone have any suggestions?
that’s what I do, albeit with a set of predefined button-cards, which can be max 4 in a horizontal stack:
type: conditional
conditions:
- entity: sensor.count_alerts_notifying
state_not: '0'
card:
type: vertical-stack
cards:
- !include /config/lovelace/includes/include_button_marquee_alerts.yaml
# https://swiperjs.com/swiper-api#modules
- type: custom:swipe-card
# card_width: '185px'
# start_card: 6
parameters:
spaceBetween: 8
# effect: coverflow
grabCursor: true
centeredSlides: false
slidesPerView: 4
# coverflowEffect:
# rotate: 50
# stretch: 0
# depth: 100
# modifier: 1
# slideShadows : true
pagination:
type: bullets
hideOnClick: true
cards:
!include /config/lovelace/buttons/buttons_alerts_swipe.yaml
# - type: custom:state-switch
# entity: sensor.count_alerts_notifying
# states:
# 1:
# !include /config/lovelace/buttons/buttons_alerts_1.yaml
# 2:
# !include /config/lovelace/buttons/buttons_alerts_2.yaml
# 3:
# !include /config/lovelace/buttons/buttons_alerts_3.yaml
# 4:
# !include /config/lovelace/buttons/buttons_alerts_4.yaml
- type: custom:button-card
template: vertical-filler
and the buttons_alerts_swipe.yaml looks like:
- type: conditional
conditions:
- entity: binary_sensor.alarm_triggered
state: 'on'
card:
!include /config/lovelace/includes/include_button_alarm_disarm.yaml
- type: conditional
conditions:
- entity: input_boolean.flood_alert
state: 'on'
card: !include /config/lovelace/includes/include_button_flood_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.doors
state: 'on'
card: !include /config/lovelace/includes/include_button_sensor_doors.yaml
- type: conditional
conditions:
- entity: binary_sensor.garage_door
state: 'on'
card: !include /config/lovelace/includes/include_button_garage_door.yaml
- type: conditional
conditions:
- entity: binary_sensor.github_repo_has_update
state: 'on'
card: !include /config/lovelace/includes/include_button_github_repo_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.earthquakes_near_active
state: 'on'
card: !include /config/lovelace/includes/include_button_quake_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.trash_notification
state: 'on'
card: !include /config/lovelace/includes/include_button_trash_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.climate_living_alert
state: 'on'
card: !include /config/lovelace/includes/include_button_ventilate.yaml
- type: conditional
conditions:
- entity: binary_sensor.updater_notification
state: 'on'
card: !include /config/lovelace/includes/include_button_updater.yaml
- type: conditional
conditions:
- entity: binary_sensor.addon_updates_available
state: 'on'
card: !include /config/lovelace/includes/include_button_addons_updates_available.yaml
etcetcetc
swipe card has proven to be the only card with which I can dynamically show these cards, and don’t have to pre-format any other settings (see the commented state-switch config which I had before). like the number of alerts ‘on’. If there is 1-4, they simply show in the horizontal stack. If there are more, then I swipe.
You can use multiple markdown cards inside a swiper card. Make sure each markdown card is inside a conditional card. That way only the markdown cards show when a certain criteria has been met. For instance:
Conditional card where the wrapped markdown card only shows when status of binary_sensor.frontdoor is set to on. Then use markdown card with tekst like The frontdoor is open. This means that if the frontdoor sensor is set to on, than the markdown card wil show up.
Create multiple conditional cards, each containing a markdown card. And use autoplay: true as a parameter for Swiper card. Having said this: if nothing is displaying, you will see a white area. So you need to be creative by using multiple nested conditional cards, or default Markdown tekst when all sensors are off.
In any case: this is not simple if you have never used markdown, conditional or swiper card. So start by experimenting with those cards and read the docs!
The conditional card seems to make the swiper card throw and error: t.setConfig is not a function which is not happening with other card types (I’ve tried entity and custom:button-card).
type: custom:swipe-card
parameters:
effect: fade
pagination:
type: bullets
autoplay:
pauseOnMouseEnter: true
disableOnInteraction: false
delay: 5000
speed: 1000
cards:
- type: conditional
conditions:
- entity: input_boolean.swiper_message_1
state: 'on'
card:
type: light
entity: light.living_room_lamp
Try without conditional card. You need to figure out if it’s actually conditional card or something else messing it up.
What HA version and Swiper card version are you running? I see this error in this thread and on Github with previous versions. I don’t have any issues with Swiper card myself and have very advanced card setups with nested cards inside eachother inside Swiper cards.
he can simply copy my setup, and if in need of markdown cards, add those in the !includes…
prevent that with the top conditional, just like I did above: only show the swiper if a certain condition is met. In my case the number of alerts is not 0 
easy.
I have tidied up my UI with conditional cards as well using nested conditional cards like you mentioned, but that wasn’t my point. My point was if you have never used these cards, you need to understand them first so you can get creative. Otherwise you’re just mindlessly copy/pasting stuff without getting new ideas you can use in other areas. As we know Lovelace is hardly plug and play. When things go wrong or get different results it will be very frustrating to troubleshoot if you havent taken the time to read the docs.
Personally I think it would be more beneficial if people understood more what they were doing: hence reading the documentations first and just experimenting instead of copy/pasting and then asking why stuff doesn’t work.
But I understand not everyone is willing to invest that much time. But it will be harder to get the right help if you don’t understand what someone is trying to explain.
I initially tested the swiper card with some random cards and have this as my current permanent set up.
type: custom:swipe-card
parameters:
effect: fade
pagination:
type: bullets
autoplay:
pauseOnMouseEnter: true
disableOnInteraction: false
delay: 5000
speed: 1000
cards:
- type: custom:button-card
entity: sensor.dark_sky_daily_summary
show_state: true
show_name: true
name: Next Few Day's Summary
tap_action:
action: none
styles:
card:
- height: 100px
- width: 500px
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 40% min-content
img_cell:
- position: absolute
- left: '-6%'
- top: 0%
- height: 150px
- width: 150px
state:
- position: absolute
- left: 20%
- top: 55%
- align-self: start
- justify-self: start
name:
- position: absolute
- left: 20%
- top: 20%
- font-weight: bold
- align-self: start
- justify-self: start
- type: custom:button-card
entity: sensor.dark_sky_hourly_summary
show_state: true
show_name: true
name: Today's Summary
tap_action:
action: none
styles:
card:
- height: 100px
- width: 500px
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: 40% min-content
img_cell:
- position: absolute
- left: '-6%'
- top: 0%
- height: 150px
- width: 150px
state:
- position: absolute
- left: 20%
- top: 55%
- align-self: start
- justify-self: start
name:
- position: absolute
- left: 20%
- top: 20%
- font-weight: bold
- align-self: start
- justify-self: start
Which is working flawlessly, until adding (or replacing with) the conditional card. Strangely it did work for a time, then gave the error when I refreshed the page. The conditional card is also working flawlessly by itself.
type: conditional
conditions:
- entity: input_boolean.swiper_message_1
state: 'on'
card:
type: light
entity: light.living_room_lamp
I’ve now copied (and heavily edited) Mariusthbdb’s code. I removed included and the surrounding conditional and changed the conditional entity, but functionally as far as I can tell it should still be effectively the same, and it currently works:
type: custom:swipe-card
parameters:
spaceBetween: 8
grabCursor: true
centeredSlides: false
slidesPerView: 4
pagination:
type: bullets
hideOnClick: true
cards:
- type: conditional
conditions:
- entity: input_boolean.swiper_message_1
state: 'on'
card:
type: entities
entities:
- light.living_room_lamp
However, as soon as I refreshed the page.
t.setConfig is not a function
type: custom:swipe-card
parameters:
spaceBetween: 8
grabCursor: true
centeredSlides: false
slidesPerView: 4
pagination:
type: bullets
hideOnClick: true
cards:
- type: conditional
conditions:
- entity: input_boolean.swiper_message_1
state: 'on'
card:
type: entities
entities:
- light.living_room_lamp
My weather swiper is still working even after a refresh.
EDIT: It seems once another change is made on the page (deleting another card for example) the swiper-conditional works again, but will t.setConfig again on a refresh.
EDIT2: So I wrapped the entire swiper card in a conditional, like the previous posters code. This seems to have resolved the issue and the swiper card has survived multiple refreshes. Interestingly the conditional seems to have no effect and the swiper card is always displayed (perhaps the vertical frame that was also in the code makes a difference there). As it stands, there seems to be a bug in how the conditional and swiper cards interact with each other, but it appears to be solvable with a workaround.
if you ever figure this out, please update 
. Im also looking at this, would love to have the slider for my camera streams and the ability to switch to one of the cameras via a button click.
Currently using custom state switch card. But would love to have some of the additional features that slider has.
I haven’t figured it out yet - I’m sure there is a way to do it but I have placed it on hold at the moment. I think it would require far more coding knowledge than I possess!
Hi All, i ran in to the same problem others are running in to which is that if you put custom button-cards in the swipe-card they are only loaded on initial load (not always) but not when refreshing the lovelace dashboard (switching tabs for instance).
Having to force close the app and reopen it is not really usable but i really like the swipe card.
Did anyone find a solution for it yet?
You can always try to create a ticket in the github repo.
Yeah i was going to do that but i thought i’d first check whether someone found some trick/easy fix.
has anyone noticed changed behavior on buttons in the swiper, which now no longer perform on hold_action?
all my buttons have a tap and hold action, and perform as expected in a regular interface card. When displayed in the swiper they all only perform the tap action, and the hold_action circle no longer shows either.
issue in the repo: Hold action not executed · Issue #35 · bramkragten/swipe-card · GitHub
did I miss a config option in the swiper maybe, the repo isnt that explicit on card options…