Hey!
So i have this conditional swipe card media player configuration.
I all works great on Desktop, but I can’t swipe between the cards on mobile.
Anyone any idea why?
type: conditional
conditions:
- entity: binary_sensor.media_player_active
state: 'on'
card:
type: custom:swipe-card
card_width: calc(100% - 48px)
parameters:
centeredSlides: true
slidesPerView: auto
spaceBetween: 16
initialSlide: 0
cards:
- type: conditional
conditions:
- entity: media_player.spotify_junglemoney
state_not: idle
card:
type: custom:button-card
entity: media_player.spotify_junglemoney
show_entity_picture: true
show_name: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"info"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: var(--contrast2);
- padding: 0
- position: relative
- '--mdc-ripple-press-opacity': 0
img_cell:
- position: absolute
icon:
- width: 150%
- opacity: var(--color-tint)
- '-webkit-filter': blur(20px)
- '-moz-filter': blur(20px)
- '-o-filter': blur(20px)
- '-ms-filter': blur(20px)
- filter: blur(20px)
custom_fields:
info:
card:
type: custom:button-card
entity: media_player.spotify_junglemoney
show_entity_picture: true
name: |
[[[
if (states['media_player.spotify_junglemoney'].attributes.media_title)
return states['media_player.spotify_junglemoney'].attributes.media_title;
else
return "Nothing is playing";
]]]
label: |
[[[
if (states['media_player.spotify_junglemoney'].attributes.media_artist)
return states['media_player.spotify_junglemoney'].attributes.media_artist;
else
return "";
]]]
show_label: true
show_icon: true
styles:
grid:
- grid-template-areas: '"i gutter n" "i gutter l"'
- grid-template-columns: min-content 24px 1fr
- grid-template-rows: min-content
card:
- font-family: hk nova medium
- background: none
- border-radius: 0
- background: none
- padding: 24px
- '--mdc-ripple-press-opacity': 0
img_cell:
- height: 80px
- width: 80px
- border-radius: 16px
icon:
- height: 100%
- width: 100%
name:
- font-size: 16px
- color: var(--contrast20)
- width: 100%
- text-align: left
- align-self: end
label:
- font-size: 12px
- color: var(--contrast20)
- opacity: 0.5
- width: 100%
- text-align: left
- align-self: start
custom_fields:
image:
- '--mdc-ripple-press-opacity': 0.5
- type: conditional
conditions:
- entity: remote.harmony_hub
state: 'on'
- entity: switch.harmony_hub_nintendo_switch
state_not: 'on'
- entity: switch.harmony_hub_playstation_2
state_not: 'on'
- entity: media_player.apple_tv_4k_2
state_not: idle
card:
type: custom:button-card
entity: media_player.apple_tv_4k_2
show_entity_picture: true
show_name: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"info"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: var(--contrast2);
- padding: 0
- position: relative
- '--mdc-ripple-press-opacity': 0
img_cell:
- position: absolute
icon:
- width: 150%
- opacity: var(--color-tint)
- '-webkit-filter': blur(20px)
- '-moz-filter': blur(20px)
- '-o-filter': blur(20px)
- '-ms-filter': blur(20px)
- filter: blur(20px)
custom_fields:
info:
card:
type: custom:button-card
entity: media_player.apple_tv_4k_2
show_entity_picture: true
name: |
[[[
if (states['media_player.apple_tv_4k_2'].attributes.media_title)
return states['media_player.apple_tv_4k_2'].attributes.media_title;
else
return "Nothing is playing";
]]]
label: |
[[[
if (states['media_player.apple_tv_4k_2'].attributes.media_artist)
return states['media_player.apple_tv_4k_2'].attributes.media_artist;
else
return "";
]]]
show_label: true
show_icon: true
icon: mdi:apple
styles:
grid:
- grid-template-areas: '"i gutter n" "i gutter l"'
- grid-template-columns: min-content 24px 1fr
- grid-template-rows: min-content
card:
- font-family: hk nova medium
- background: none
- border-radius: 0
- background: none
- padding: 24px
- '--mdc-ripple-press-opacity': 0
img_cell:
- height: 80px
- width: 80px
- border-radius: 16px
icon:
- height: 100%
- width: 100%
name:
- font-size: 16px
- color: var(--contrast20)
- width: 100%
- text-align: left
- align-self: end
label:
- font-size: 12px
- color: var(--contrast20)
- opacity: 0.5
- width: 100%
- text-align: left
- align-self: start
custom_fields:
image:
- '--mdc-ripple-press-opacity': 0.5
- type: conditional
conditions:
- entity: remote.harmony_hub
state: 'on'
- entity: switch.harmony_hub_playstation_2
state: 'on'
card:
type: custom:button-card
entity: sensor.ps5_343_activity
show_entity_picture: true
show_name: false
entity_picture: |
[[[
if (states['sensor.ps5_343_activity'].attributes.title_image)
return states['sensor.ps5_343_activity'].attributes.title_image;
]]]
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"info"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: var(--contrast2);
- padding: 0
- position: relative
- '--mdc-ripple-press-opacity': 0
img_cell:
- position: absolute
icon:
- width: 150%
- opacity: var(--color-tint)
- '-webkit-filter': blur(20px)
- '-moz-filter': blur(20px)
- '-o-filter': blur(20px)
- '-ms-filter': blur(20px)
- filter: blur(20px)
custom_fields:
info:
card:
type: custom:button-card
entity: sensor.ps5_343_activity
show_entity_picture: true
name: |
[[[
if (states['sensor.ps5_343_activity'].attributes.title_name)
return states['sensor.ps5_343_activity'].attributes.title_name;
else
return "Nothing is playing";
]]]
label: |
[[[
if (states['sensor.ps5_343_activity'].attributes.activity)
return states['sensor.ps5_343_activity'].attributes.activity + " (PlayStation 5)";
else
return "";
]]]
entity_picture: |
[[[
if (states['sensor.ps5_343_activity'].attributes.title_image)
return states['sensor.ps5_343_activity'].attributes.title_image;
]]]
show_label: true
show_icon: true
icon: mdi:sony-playstation
styles:
grid:
- grid-template-areas: '"i gutter n" "i gutter l"'
- grid-template-columns: min-content 24px 1fr
- grid-template-rows: min-content
card:
- font-family: hk nova medium
- background: none
- border-radius: 0
- background: none
- padding: 24px
- '--mdc-ripple-press-opacity': 0
img_cell:
- height: 80px
- width: 80px
- border-radius: 16px
icon:
- height: 100%
- width: 100%
name:
- font-size: 16px
- color: var(--contrast20)
- width: 100%
- text-align: left
- align-self: end
label:
- font-size: 12px
- color: var(--contrast20)
- opacity: 0.5
- width: 100%
- text-align: left
- align-self: start
custom_fields:
image:
- '--mdc-ripple-press-opacity': 0.5
For the card design I followed this tutorial: Rounded