Hi!
I can’t get it to work with that either.
Could you share your code? 
Sure
- type: grid
title: Media ↔
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: sensor.ps5_069_activity
double_tap_action: !include popup/woonkamer_playstation.yaml
name: Playstation
template:
- media
- icon_ps5
- type: custom:button-card
name: Sonos
entity: media_player.tv_speaker
template:
- media
- icon_sonos
- type: custom:button-card
entity: media_player.spotify_toutje_home
name: Spotify
template:
- media
- icon_spotify
- type: custom:button-card
entity: media_player.apple_tv
name: Apple TV
template:
- media
- icon_apple_tv
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: media_player.tv_woonkamer
name: Televisie
state_display: >
[[[
if (variables.state === 'playing') {
return 'Aan';
}
if (variables.state === true) {
return variables.translate_off;
}
]]]
variables:
circle_input: >
[[[
let volume = states['sensor.tv_speaker_volume'];
if (volume) return parseInt(volume.state);
]]]
circle_input_unit: "%"
double_tap_action: !include popup/woonkamer_tv.yaml
template:
- base
- icon_tv
- circle
- loader
- type: custom:button-card
entity: media_player.viera_ut50_series
name: Televisie
state_display: >
[[[
if (variables.state === 'playing') {
return 'Aan';
}
if (variables.state === true) {
return variables.translate_off;
}
]]]
variables:
circle_input: >
[[[
let volume = states['sensor.tv_speaker_volume'];
if (volume) return parseInt(volume.state);
]]]
circle_input_unit: "%"
double_tap_action: !include popup/woonkamer_tv.yaml
template:
- base
- icon_tv
- circle
- loader
1 Like
It’s probably me who was unclear now.
It’s along with this that I can’t get it to work
Lovelace: Swiper card - #581 by flufftronix 
I’m not sure exactly sure what’s going on here either, but I do get the same bug: swipe interactions remain, but no tap/hold interactions register.
If you omit the absolute positioning for the bullets that interactive functionality per slide remains, but then the “bullets” return to the bottom. I’ll try tinkering around with some other layout options. And/or maybe this also happens upstream in slider.is in general, in which case perhaps there’s a workaround there.
EDIT: Found it. The bullets come formatted with bottom: 10px on them, so when that’s combined with position: absolute; and top: 0;, the bullet container stretches over the slides entirely. Slider.js can override this for the slide swiping, but not the content.
Adding bottom: inherit !important; to .swiper-pagination-bullets fixes this. Edited that into my original snippet above.
1 Like
I haven’t tried with this particular snippet (yet; I’d like to) but I’ve added other JavaScript via either listing it as a resource in configuration.yaml like this (see “loading extra javascript”), or per dashboard in Settings > Dashboard > 3 dots in the upper right corner > Resources like this.
In either case, uploading to /config/www/file.js is indicated by using /local/file.js for the path. (Also helpful to know: edits to these js files won’t immediately appear on refresh in the companion app, you need to head to Settings > Companion App > Reset Frontend Cache on the iOS app… not sure on the Android one)
1 Like
Just came across a workaround to this, since loop: true is still showing me a blank first slide:
Using rewind: true instead. Slightly different effect, but it does allow for cycling through all the slides without a blank.
1 Like
Love the dude, can you use use mdi icons instead of labels ?
Yes, though the only way I know that would work for it would be to paste in the SVG code (find the icon you want to use on the material design icons site, and use the copy code button) where the text label would go:
Thanks, I tried it but unfortunately, I can’t get the icon to render. 
.swiper-pagination-bullets>span:nth-child(4):before {
content: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>grill-outline</title><path d="M17 22A3 3 0 1 0 14.18 18H9.14L11.13 14.94A6.36 6.36 0 0 0 12.87 14.94L13.89 16.5C14.31 16 14.85 15.56 15.5 15.3L14.89 14.37A7 7 0 0 0 19 8H5A7 7 0 0 0 9.12 14.37L5.17 20.45A1 1 0 0 0 6.84 21.54L7.84 20H14.18A3 3 0 0 0 17 22M17 18A1 1 0 0 1 18 19C18 19.55 17.55 20 17 20S16 19.55 16 19A1 1 0 0 1 17 18M7.42 10H16.58A5 5 0 0 1 7.42 10M9.41 7H10.41C10.56 5.85 10.64 5.36 9.5 4.04C9.1 3.54 8.84 3.27 9.06 2H8.07A3.14 3.14 0 0 0 8.96 4.96C9.18 5.2 9.75 5.63 9.41 7M11.89 7H12.89C13.04 5.85 13.12 5.36 12 4.04C11.58 3.54 11.32 3.26 11.54 2H10.55A3.14 3.14 0 0 0 11.44 4.96C11.67 5.2 12.24 5.63 11.89 7M14.41 7H15.41C15.56 5.85 15.64 5.36 14.5 4.04C14.1 3.54 13.84 3.27 14.06 2H13.07A3.14 3.14 0 0 0 13.96 4.96C14.18 5.2 14.75 5.63 14.41 7Z" /></svg>';
This goes beyond my understanding as to why exactly it works, but I was able to get an SVG to show up in the content: using base64 as described here.
1 Like
yeah, so I tried too, but I cant get it to go back after the last slide…
# https://swiperjs.com/swiper-api#parameters
parameters:
rewind: true
# loop: true #continue from last to first
# loopPreventsSliding: false
effect: cube #cards
pagination:
type: bullets #progressbar #fraction
navigation:
# simulateTouch: true
# spaceBetween: 4
preloadImages: true
preventInteractionOnTransition: true
preventClicks: true
# freeMode: true
sticky: true
# momentum: true
# grabCursor: true
# slidesPerView: 3
# keyboard:
# enabled: true
# onlyInViewport: true
Ive tried various pagination options, which didnt make a difference. How do you set rewind, and get it functional?
For some reason I can’t get mushroom-chips-cards to work with the swipe cards mods ? I am not sure if it just me.
Anyone has an idea why my “button-cards” don’t show up? they do in the editor when i modify the code, but disapear when I save!
Any help is welcomed.
> type: vertical-stack
> cards:
> - square: true
> columns: 10
> type: grid
> cards:
> - show_name: false
> show_icon: true
> type: button
> tap_action:
> action: navigate
> navigation_path: /tablet-entrance-dashboard/0
> icon: mdi:arrow-left-thick
> show_state: false
> hold_action:
> action: navigate
> navigation_path: /tablet-entrance-dashboard/main-view
> - show_name: true
> show_icon: true
> type: button
> tap_action:
> action: toggle
> entity: input_boolean.random_colors
> icon: mdi:shuffle-variant
> hold_action:
> action: toggle
> theme: synthwave
> - show_name: true
> show_icon: true
> type: button
> tap_action:
> action: toggle
> entity: input_boolean.random_pastel_colors
> name: Pastel Colors
> icon: mdi:shuffle
> - show_name: true
> show_icon: true
> type: button
> tap_action:
> action: toggle
> entity: input_button.generate_warm_colors
> name: Warm Colors
> icon: mdi:shuffle
> - show_name: true
> show_icon: true
> type: button
> tap_action:
> action: toggle
> entity: input_button.generate_light_warm_colors
> name: Pale Warm Colors
> - type: custom:mushroom-chips-card
> chips:
> - type: entity
> entity: input_boolean.trippy_lights_effect
> - type: entity
> entity: input_number.trippy_lights_effect_speed
> - type: entity
> entity: input_number.trippy_lights_color_saturation
> - type: custom:swipe-card
> cards:
> - type: vertical-stack
> cards:
> - type: vertical-stack
> cards:
> - color: auto
> color_type: card
> double_tap_action:
> action: call-service
> service: light.toggle
> service_data:
> entity_id: light.all_lights
> icon: mdi:lightbulb-multiple
> name: Groups
> styles:
> card:
> - font-size: 14px
> - font-weight: bold
> - height: 120px
> - color: white
> - background: rgb(90, 20, 90)
> type: custom:button-card
> - type: custom:mushroom-light-card
> entity: light.group_all_inside_lights
> name: All Indoor Lights
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:lightbulb-group
> layout: horizontal
> primary_info: name
> show_color_temp_control: true
> collapsible_controls: false
> - type: horizontal-stack
> cards:
> - type: custom:mushroom-light-card
> entity: light.group_entrance_lights
> name: Entrance
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:door
> layout: horizontal
> primary_info: name
> - type: custom:mushroom-light-card
> entity: light.group_hallway_lights
> name: Hallway
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: ''
> layout: horizontal
> primary_info: name
> - type: horizontal-stack
> cards:
> - type: custom:mushroom-light-card
> entity: light.group_closet_lights
> name: Closet Lights
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:string-lights
> layout: horizontal
> primary_info: name
> - type: custom:mushroom-light-card
> entity: light.group_office_lights
> name: Office
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: ''
> layout: horizontal
> primary_info: name
> - type: horizontal-stack
> cards:
> - type: custom:mushroom-light-card
> entity: light.group_livingroom_lights
> name: Living Room
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:television
> layout: horizontal
> primary_info: name
> - type: custom:mushroom-light-card
> entity: light.group_chillingroom_lights
> name: ChillingRoom
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:pine-tree-box
> layout: horizontal
> primary_info: name
> show_color_temp_control: false
> - type: horizontal-stack
> cards:
> - type: custom:mushroom-light-card
> entity: light.group_kitchen_lights
> name: Kitchen
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:silverware-variant
> layout: horizontal
> primary_info: name
> - type: custom:mushroom-light-card
> entity: light.group_hotbox_lights
> name: Hotbox
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:cannabis
> layout: horizontal
> primary_info: name
> - type: horizontal-stack
> cards:
> - type: custom:mushroom-light-card
> entity: light.group_server_lights
> name: Server
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:server-security
> layout: horizontal
> primary_info: name
> - type: custom:mushroom-light-card
> entity: light.plug_patio_light
> name: Patio
> fill_container: false
> show_brightness_control: true
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:patio-heater
> layout: horizontal
> primary_info: name
> - type: horizontal-stack
> cards:
> - type: vertical-stack
> cards:
> - color: auto
> color_type: card
> double_tap_action:
> action: call-service
> service: light.toggle
> service_data:
> entity_id: light.group_livingroom_lights
> icon: mdi:monitor
> name: Living Room
> styles:
> card:
> - font-size: 14px
> - font-weight: bold
> - height: 120px
> - color: white
> - background: rgb(100, 0, 0)
> type: custom:button-card
> - type: custom:mushroom-light-card
> entity: light.group_livingroom_lights
> name: Living Room
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:lightbulb-group
> - type: custom:mushroom-light-card
> entity: light.livingroom_center_light
> name: Chandelier
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:chandelier
> - type: custom:mushroom-light-card
> entity: light.livingroom_behind_tv_light
> name: Behind TV
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:television-ambient-light
> - type: custom:mushroom-light-card
> entity: light.livingroom_window_light
> name: Window
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:window-closed-variant
> - type: vertical-stack
> cards:
> - color: auto
> color_type: card
> double_tap_action:
> action: call-service
> service: light.toggle
> service_data:
> entity_id: light.group_chillingroom_lights
> icon: mdi:pine-tree
> name: Chilling Room
> styles:
> card:
> - font-size: 14px
> - font-weight: bold
> - height: 120px
> - color: white
> - background: rgb(150, 0, 150)
> type: custom:button-card
> - type: custom:mushroom-light-card
> entity: light.group_chillingroom_lights
> name: Chilling Room
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:lightbulb-group
> - type: custom:mushroom-light-card
> entity: light.chillingroom_ceiling_light
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:wall-sconce-flat
> name: Ceiling Light
> - type: custom:mushroom-light-card
> entity: light.chillingroom_christmas_tree_light
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:pine-tree
> name: Christmas Tree
> - type: custom:mushroom-light-card
> entity: light.chillingroom_colo_light
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: ''
> name: ColoLight
> - type: horizontal-stack
> cards:
> - type: vertical-stack
> cards:
> - color: auto
> color_type: card
> double_tap_action:
> action: call-service
> service: light.toggle
> service_data:
> entity_id: light.group_office_lights
> icon: mdi:monitor-dashboard
> name: Office
> styles:
> card:
> - font-size: 14px
> - font-weight: bold
> - height: 120px
> - color: white
> - background: rgb(200, 30, 30)
> type: custom:button-card
> - type: custom:mushroom-light-card
> entity: light.group_office_lights
> name: Office Lights
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:lightbulb-group
> - type: custom:mushroom-light-card
> entity: light.office_lamp1_light
> name: Lamp 1
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:floor-lamp-dual
> - type: custom:mushroom-light-card
> entity: light.office_lamp2_light
> name: Lamp 2
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:floor-lamp-dual
> - type: custom:mushroom-light-card
> entity: light.quotra_office_light
> name: Quotra Circle
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:circle-outline
> - type: vertical-stack
> cards:
> - color: auto
> color_type: card
> double_tap_action:
> action: call-service
> service: light.toggle
> service_data:
> entity_id: light.group_kitchen_lights
> icon: mdi:silverware-fork-knife
> name: Kitchen
> styles:
> card:
> - font-size: 14px
> - font-weight: bold
> - height: 120px
> - color: white
> - background: rgb(0, 230, 230)
> type: custom:button-card
> - type: custom:mushroom-light-card
> entity: light.group_kitchen_lights
> name: Kitchen
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:lightbulb-group
> - type: custom:mushroom-light-card
> entity: light.kitchen_1_light
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:numeric-1-box
> name: First
> - type: custom:mushroom-light-card
> entity: light.kitchen_2_light
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:numeric-2-box
> name: Second
> - type: custom:mushroom-light-card
> entity: light.kitchen_3_light
> fill_container: false
> show_brightness_control: true
> layout: horizontal
> show_color_control: true
> tap_action:
> action: more-info
> hold_action:
> action: toggle
> double_tap_action:
> action: toggle
> use_light_color: true
> icon: mdi:numeric-3-box
> name: Third
impossible to test for us like that. please provide a ‘minimal’ config that does not work
For me, same problem
type: custom:button-card
custom_fields:
graph:
card:
type: custom:swipe-card
parameters:
effect: fade
fadeEffect:
crossFade: true
slideShadows: false
autoplay:
delay: 1500
speed: 1000
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:lamp
styles:
card:
- width: 120px
- height: 120px
- border-radius: 10px
- background-color: white
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:sofa
styles:
card:
- width: 120px
- height: 120px
- background-color: white
Hi everyone.
I have some questions for the swiper card.
-
If cconditional cards are being used with Autoheight feature, when the card is not shown, the next card does not apply autoheight feature. Is there any way to solve that ?
type: custom:layout-card
layout: masonry
cards:
- type: grid
columns: 5
square: false
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:swipe-card
card_width: 100%
style: |
ha-card {
height: 85vh;
}
parameters:
autoHeight: true
slidesPerView: auto
allowTouchMove: true
spaceBetween: 8
speed: 35
direction: vertical
scrollbar:
hide: true
draggable: false
snapOnRelease: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:television
primary: null
secondary: null
entity: input_boolean.notify_home3
fill_container: false
multiline_secondary: false
layout: horizontal
style: |
mushroom-card {
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home4', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: rgba(156, 27, 12, 0.2);
{% if is_state('input_boolean.notify_home3', 'on') %}
{% else %}
background: #1a1a1a;
{% endif %}
width: 36px;
border-radius: 15px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
box-shadow: 0px 0px 6px 6px rgba(156,27,12,0.96) !important;
}
.swiper-container"
style="width:100%;height;400px"
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: picture-entity
entity: climate.146235046506144_climate
show_state: false
show_name: false
image: /local/room-cards/kaira.png
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_ac
double_tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_kapat
theme: Mushroom
card_mod:
style: |
:host {
--ha-card-background: none;
height: 10px;
}
ha-card {
background: none;
margin-top: 45px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: auto;
padding: 0
height: 10x;
width: auto;
}
- type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_salon'') }} °C'
primary: Vestel
entity: entity.entity
icon: mdi:weather-partly-cloud
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_ac
double_tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_kapat
fill_container: false
multiline_secondary: false
layout: horizontal
style: |
mushroom-card {
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: none;
margin-top: 0px;
margin-left: 20px;
margin-right: auto;
margin-bottom: 20px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:swipe-card
style: |
ha-card {
height: 85vh;
}
parameters:
autoHeight: true
slidesPerView: auto
allowTouchMove: true
spaceBetween: 8
speed: 35
direction: vertical
scrollbar:
hide: true
draggable: true
snapOnRelease: true
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:television
primary: null
secondary: null
entity: input_boolean.notify_home3
fill_container: false
multiline_secondary: false
layout: horizontal
style: |
mushroom-card {
background-size: 42px 42px;
{% if is_state('input_boolean.notify_home4', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: rgba(156, 27, 12, 0.2);
{% if is_state('input_boolean.notify_home3', 'on') %}
{% else %}
background: #1a1a1a;
{% endif %}
width: 36px;
border-radius: 15px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
box-shadow: 0px 0px 6px 6px rgba(156,27,12,0.96) !important;
}
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: picture-entity
entity: climate.146235046506144_climate
show_state: false
show_name: false
image: /local/room-cards/kaira.png
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_ac
double_tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_kapat
theme: Mushroom
card_mod:
style: |
:host {
--ha-card-background: none;
height: 10px;
}
ha-card {
background: none;
margin-top: 45px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: auto;
padding: 0
height: 10x;
width: auto;
}
- type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_salon'') }} °C'
primary: Vestel
entity: entity.entity
icon: mdi:weather-partly-cloud
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_ac
double_tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.klima_kapat
fill_container: false
multiline_secondary: false
layout: horizontal
style: |
mushroom-card {
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: none;
margin-top: 0px;
margin-left: 20px;
margin-right: auto;
margin-bottom: 20px;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.035);
height: auto;
margin-left: -100px !important;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.035);
height: auto;}
Just like in this example. Is there a way to force width of the slide when swiped vertically ? Currently it looks like this.
My final question is how can we use swiper card with light sliders ? Currently it becomes very hard to drag sliders. İs there a way to prevent this ?
Sorry I know it’s been too many questions but I am building a new dashboard mostly dependent on swiper cards. I need to know the answers to these questions. thanks for help.
Hi!
Why does my swipe card sometime start on the last card? I have start_card: 1
But sometimes when i refresh it shows the last card, but not all the times but sometimes.
This is one of my cards:
type: custom:swipe-card
title: null
card_width: 100%
start_card: 1
reset_after: 10
parameters:
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
coverflowEffect:
rotate: 110
stretch: 90
depth: 633
modifier: 1
slideShadows: true
pagination:
type: bullets
cards:
- type: custom:tesla-style-solar-power-card
hide_inactive_lines: 1
show_gap: true
change_house_bubble_color_with_flow: 1
grid_to_house_entity: sensor.template_grid_consumption
generation_to_grid_entity: sensor.template_grid_feed_in
generation_to_house_entity: sensor.template_curent_solar_consumption
house_entity: sensor.house_consumption_daily
generation_entity: sensor.daily_yield
grid_entity: sensor.grid_import_solar_daily_energy
house_extra_entity: sensor.grid_import_solar_daily_energy
generation_extra_entity: sensor.daily_yield
grid_extra_entity: sensor.grid_export_solar_daily_energy
- type: gauge
entity: sensor.input_power
min: 0
max: 12000
needle: true
severity:
green: 3000
yellow: 1000
red: 0
name: Nuvarande Effekt från solpaneler
- type: gauge
entity: sensor.grid_active_power
min: -8000
max: 8000
needle: true
severity:
green: 0
red: -8000
name: '-Från nätet +Från solpaneler'
- type: gauge
entity: sensor.day_active_power_peak
min: 0
max: 12000
needle: true
severity:
green: 6000
yellow: 3000
red: 0
name: Högsta toppeffekt idag
- type: gauge
entity: sensor.internal_temperature
min: 0
max: 65
needle: true
severity:
green: 0
yellow: 59
red: 59.5
name: Inverter Temperatur
line_color: '#4BC0C0'
- type: gauge
entity: sensor.grid_frequency
min: 49.5
max: 50.2
needle: true
severity:
green: 49.5
red: 50.1
name: Frekvens
line_color: '#4BC0C0'
- type: custom:mini-graph-card
entities:
- sensor.total_yield
line_color: red
line_width: 3
name: Totalt producerat
font_size: 75
- type: custom:mini-graph-card
entities:
- sensor.grid_exported
line_color: red
line_width: 3
name: Totalt såld el
font_size: 75
- type: custom:swipe-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: card_title
label: Kamer
- type: 'custom:button-card'
template: card_title
label:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_light
- type: "custom:button-card"
template: card_light
Why is the buttoncard “kamer” and de empty buttoncard not in the same swipe ?
On screen the “kamer” and the 2 light buttons are next to each other, and not kamer with the 2 buttons below …
Because you have ONE Grid card listed in the swipe-card.
- square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: card_title
label: Kamer
- type: 'custom:button-card'
template: card_title
label:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_light
- type: "custom:button-card"
template: card_light
This is one card, since your put it as a block under:
- type: custom:swipe-card
cards:
- YOUR CODE
If you want to swipe between cards, you need to list them as multiple cards, so:
- type: custom:swipe-card
cards:
- CODE CARD 1
- CODE CARD 2
The same reason why you have 2 different cards inside your horizontal-stack card, and you have 2 different horizontal-stack cards inside your grid, you will have to use 2 cards in swipe card, in order to have… 2 cards 
.
TL;DR all swipe-card does is swipe between the cards you put there as cards. If you put it all as one code block under cards this means you in fact have one card.
