I’m getting this error, t.setConfig error.
I’ve installed the preload cards and added it to my Lovelace with the card types and restarted, however it’s not changed.
It only works if I view the cards in another format first then go back to the slider card. So it suggests it’s still a preloading issue.
Does anyone know how to jump directly to a particular card though navigation.
in my setup, The first card in the group shows a basic overview of 8 of the subsequent cards. When I press on one of the overviews id like to jump directly to the card
Were you ever able to figure this out as I’m also looking to do the same thing? As devitus mentioned, there’s the activeIndex or realIndex properties but I don’t know how to use it within Home Assistant.
I know your question was a year ago or so but were you ever able to figure out or get an answer to your question on using events to use call-service? I’m looking to do something similar and am stuck. Thanks in advance.
Great card, easy to use for a novice like me, limitless possibilities.
Weather clock example:
type: custom:swipe-card
card_width: auto
start_card: 1
parameters:
slidesPerView: 1
spaceBetween: 0
grabCursor: true
followFinger: true
pagination:
type: bullets
color: white
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
sun_entity: sun.sun
temperature_sensor: sensor.openweathermap_temperature
weather_icon_type: fill
animated_icon: true
forecast_days: 0
locale: an-GB
fill: true
time_format: 12
date_pattern: dd MMMM
hide_today_section: false
hide_forecast_section: true
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: true
- type: custom:clock-weather-card
entity: weather.openweathermap
hide_forecast_section: false
hide_date: false
animated_icon: true
hide_today_section: true
weather_icon_type: line
forecast_days: 4
Album gallery example:
- type: custom:stack-in-card
cards:
- type: custom:swipe-card
card_width: 15%
start_card: 4
parameters:
spaceBetween: 4
effect: coverflow
grabCursor: false
centeredSlides: false
slidesPerView: auto
coverflowEffect:
rotate: 0
stretch: 0
depth: 20
modifier: 1
slideShadows: true
pagination:
type: bullets
cards:
- type: picture
image: >-
https://i.scdn.co/image/ab67706f00000002710eb316c75a6df0bd83bb2e
tap_action:
action: call-service
service: media_player.play_media
target:
entity_id: media_player.den
data:
media_content_id: >-
media-source://media_source/media/London
Streams/purple disco.m4a
media_content_type: audio/mp4
enqueue: play
entity: light.den_group
- type: picture
theme: slate
image: >-
https://i.scdn.co/image/ab67706c0000da84910fe2ed0a4c7d51595a203c
tap_action:
action: call-service
service: media_player.play_media
target:
entity_id: media_player.den
data:
media_content_id: >-
media-source://media_source/media/London
Streams/printworks stream1.m4a
media_content_type: audio/mp4
enqueue: play
entity: light.greenhouse_group
No unfortunately, still bugs me on occasion 
Hi,
I’m looking to swipe 2 different swipe-cards at the same time. (Built in a tabbed card and a vert-stack)
Is there any type of function or workaround for this?
So in this example I would like to swipe both the swipecard for temperature and the humidity at the same time.
Can you not just stack both cards within another vertical-stack, for example? Then your first swipe card would be the vertical stack rather than the individual temp cards.
Hi,
This looks great.
You willing to share the code for this one?
- type: custom:swipe-card
card_width: 100%
start_card: 1
parameters:
effect: coverflow
threshold: 2
slidesPerView: 1
centeredSlides: true
coverflowEffect:
stretch: -50
rotate: 20
depth: 100
slideShadows: true
cards:
- type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.wiser_lts_temperature_family_room
name: Inside Temperature
color: "#4caf50"
hours_to_show: 24
line_width: 2
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
fill: fade
style: |
ha-card {
background-color: rgba(38,40,42,1) !important;
margin: 0px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.wiser_lts_temperature_family_room
name: Inside Temperature
color: "#4caf50"
hours_to_show: 24
line_width: 2
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
fill: fade
style: |
ha-card {
background-color: rgba(38,40,42,1) !important;
margin: 0px !important;
}
- type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.wiser_lts_temperature_family_room
name: Inside Temperature
color: "#4caf50"
- entity: sensor.wiser_lts_temperature_family_room
name: Inside Temperature
color: "#2196f3"
y_axis: primary
hours_to_show: 24
line_width: 2
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
fill: fade
style: |
ha-card {
background-color: rgba(38,40,42,1) !important;
margin: 0px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.wiser_lts_temperature_family_room
name: Inside Temperature
color: "#4caf50"
- entity: sensor.wiser_lts_temperature_family_room
name: Inside Temperature
color: "#2196f3"
y_axis: primary
hours_to_show: 24
line_width: 2
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
fill: fade
style: |
ha-card {
background-color: rgba(38,40,42,1) !important;
margin: 0px !important;
}
Thx this helped a bit.
I’m still trying to figure out how to auto-populate my entities this way now.
It seems to be very hard since the Swipe card is doing such a great job putting the cards in a horizontal line.
Any suggestions? 
Previous code looking something like this.
type: custom:tabbed-card
tabs:
- card:
type: vertical-stack
cards:
- type: custom:auto-entities
card:
type: custom:swipe-card
card_width: 400px
autoHeight: true
start_card: 1
parameters:
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
card_param: cards
filter:
exclude:
- name: '*ress*'
- name: '*atter*'
- name: '*umid*'
- entity_id: '*sensor.gt*'
include:
- domain: sensor
name: '*GT1*'
options:
type: custom:mini-graph-card
entities:
- this.entity_id
color_thresholds:
- value: 27
color: '#f39c12'
- value: 28
color: '#d35400'
- value: 29
color: '#c0392b'
show:
labels: true
points: false
- type: custom:auto-entities
card:
type: custom:swipe-card
card_width: 400px
autoHeight: true
start_card: 1
parameters:
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
card_param: cards
filter:
include:
- entity_id: '*umid*'
domain: sensor
options:
type: custom:mini-graph-card
entities:
- this.entity_id
color_thresholds:
- value: 55
color: '#F3B6D5'
- value: 60
color: '#FD54A9'
- value: 65
color: '#3400DE'
show:
labels: true
points: false
- type: custom:auto-entities
card:
type: custom:swipe-card
card_width: 400px
autoHeight: true
start_card: 1
parameters:
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
card_param: cards
filter:
include:
- entity_id: '*monox*'
domain: sensor
options:
type: custom:mini-graph-card
entities:
- this.entity_id
color_thresholds:
- value: 600
color: '#F3B6D5'
- value: 800
color: '#FD54A9'
- value: 1000
color: '#3400DE'
show:
labels: true
points: false
attributes:
label: Alla rum
I am trying to use this card on my dashboard. However, whenever I try to use it, it messes up my top row. here is my code. Can anyone tell me what I might be doing wrong?
button_card_templates:
!include_dir_merge_named ui-lovelace/button_card/
icon: mdi:tablet-smartphone
kiosk_mode:
non_admin_settings:
kiosk: true
ignore_entity_settings: true
entity_settings:
- entity:
input_boolean.kiosk: 'on'
hide_header: true
- entity:
input_boolean.kiosk: 'off'
hide_header: false
views:
- title: "dashboard"
path: "dashboard"
theme: tablet
type: custom:grid-layout
layout:
#default
grid-template-columns: 185px 1fr 1fr
grid-template-rows: fit-content(100%) fit-content(100%)
grid-template-areas: |
"sb col1top col2top"
"sb col1bot col2bot"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-row: fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) 1px
grid-template-areas: |
"col1top"
"col2top"
"col1bot"
"col2bot"
"sb"
cards:
#extra_styles fix, do not remove
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sb
cards:
- !include /config/ui-lovelace/cards/sidebar.yaml
#################################################
# #
# HEADER1 #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: col1top
cards:
- !include /config/ui-lovelace/cards/row-people.yaml
#################################################
# #
# COL1 #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: col1bot
cards:
- !include /config/ui-lovelace/cards/complete-climate.yaml
- !include /config/ui-lovelace/cards/timer.yaml
#################################################
# #
# HEADER2 #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: col2top
cards:
- !include /config/ui-lovelace/cards/row-presence.yaml
#################################################
# #
# COL2 #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: col2bot
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 60
parameters:
spaceBetween: 8
scrollbar:
hide: true
draggable: true
snapOnRelease: true
cards:
- type: vertical-stack
cards:
- !include /config/ui-lovelace/cards/1-row-hvac-triggers.yaml
- !include /config/ui-lovelace/cards/1-row-living.yaml
- !include /config/ui-lovelace/cards/1-row-bedrooms.yaml
- !include /config/ui-lovelace/cards/1-row-bathroom-kitchen.yaml
- !include /config/ui-lovelace/cards/1-row-garage-kitchen.yaml
- !include /config/ui-lovelace/cards/1-row-basement.yaml
- type: vertical-stack
cards:
- !include /config/ui-lovelace/cards/2-living-buttons.yaml
- !include /config/ui-lovelace/cards/2-bedroom-buttons.yaml
- !include /config/ui-lovelace/cards/2-neenie-buttons.yaml
- !include /config/ui-lovelace/cards/2-maggie-buttons.yaml
- !include /config/ui-lovelace/cards/2-bathroom-buttons.yaml
- !include /config/ui-lovelace/cards/2-kitchen-buttons.yaml
Without the swipe card this is what I have.
But when I enable to code above, I get this. The top row in the right column gets way out of whack.
Has anyone encountered this issue? I have tried searching this thread, but haven’t found anything. Cards and entities are not loading in until I change view.
Hi Fredrik. Have you found any solution ?
Hi, since I read the swiper card is not being maintained anymore, I dropped it all together. Hoping I have wrong, because it’s a great card
Hi there,
I just started using this swipe card. But it isn’t showing the trend line. Anyone an idea how this can be?
You can use the start_card parameter, if that is what you mean.
No I don’t think it centers the start card like in my image. It would just be #2 and #3 visible.
Nothing to do with swiper card. You need to use the correct variables for sensor card. Add graph: line to actually show a graph.
Is this so you can have one template that can be used on all your button cards ?
now my lovelace code is so long because i have to code it for every button and also if i want to change one thing i have to do it for every card by hand
