did you manage to get this working @Myztillx?
I tried this, but I donât get it working adding cards in a conditional card and then into a swiper card. Do you have any config/code example?
edit: got it working
1 Like
I was just about to post an example. Glad you got is working though!
1 Like
Maybe for the others when searching for a swiper conditional combination:
quick note: please be aware that cardoptions is a homekit-hacs plugin function so you should revert it back to normal card configuration
- card: custom:swipe-card
wider: true
higher: true
widerSize: 3
higherSize: 3
noPadding: true
cardOptions:
cards:
- type: conditional
conditions:
- entity: media_player.spotify_mart
state: "playing"
card:
type: "custom:mini-media-player"
artwork: full-cover
entity: media_player.spotify_mart
style: |
:host {
}
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.5vw !important;
image
}
.button {
padding: 0px !important;
margin: 3px 2px !important;
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
- type: conditional
conditions:
- entity: media_player.spotify_lussie33
state: "playing"
card:
type: "custom:mini-media-player"
artwork: full-cover
entity: media_player.spotify_lussie33
style: |
:host {
}
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.5vw !important;
image
}
.button {
padding: 0px !important;
margin: 3px 2px !important;
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
3 Likes
Has anyone managed to get loop working?
I want to have (currently 2 maps but there will probably be more) and instead of swiping the correct way I want to be able to loop around all maps.
This is what I have currently which does not work
type: 'custom:swipe-card'
parameters:
loop: true
loopAdditionalSlides: 2
loopedSlides: 2
centeredSlides: true
slidesPerView: auto
spaceBetween: 8
pagination:
type: progressbar
navigation: null
keyboard:
enabled: true
onlyInViewport: true
cards:
- type: map
entities:
- person.petra
- person.andreash
- device_tracker.kraftan
- type: map
entities:
- person.petra
- device_tracker.kraftan
When you read the documentation about loops https://swiperjs.com/api/ (CTRL + F âLoopâ match 9/38 ) itâs not clear to me at least what I have done wrong.
I get two cards and I can swipe between them but when I loop I get to a blank card and if I keep swiping I go back to the card I came from.
1 Like
Hi,
From one of the versions the problem was solved by itself.
It looks to follow the color of the theme.
Hey, Iâm trying to resize the bullets since i have them âclickableâ and on my touchscreen (raspberry pi os) i canât swipe (it bugs) and clicking works.
But the bullets are too small to click.
Do you have any idea how to css them and where?
This is what I have but it has no effect @Bram_Kragten
style: |
.swiper-pagination-bullet {
width: 20px;
height: 20px;
}
the only way I found to edit swipe card style was to use the custom:mod-card type on top of the swipe card
type: custom:mod-card
style:
swipe-card:
$: |
.swiper-scrollbar-drag {
background-color: rgba(255,79,211,0.6) !important;
}
card:
type: custom:swipe-card
cards:
3 Likes
Hey all, I am using this with a raspberry pi and a touchscreen, chromium. And I experience that swipe just wonât work. It wonât fully swipe as it should and itâs laggy. Did others experience this issue, and found a solution for this?
added the .js file in www/custom-lovelace/swipe-card/
added resources:
- url: /local/custom-lovelace/swipe-card/swipe-card.js?v=3.0.0
type: module
to the top of lovelace yaml but get this error when trying to make a custom card⌠??
UI editor is not supported for this config:
- Cannot read property âsetConfigâ of undefined
You can still edit your config in yaml.
This isnât a swiper card issue, but a user error.
Follow the docs. Nowhere do they say to put them in lovelace.yaml. It goes in configuration.yaml if you use YAML mode.
https://www.home-assistant.io/lovelace/dashboards-and-views/
As explained per example on the official docs:
lovelace:
mode: yaml
# Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
resources:
- url: /local/my-custom-card.js
type: module
- url: /local/my-webfont.css
type: css
This is all in configuration.yaml.
Awesome card, thank you. Can we make a âThumbs Galleryâ with it ?
the example of âThumbs Galleryâ from the swiper website :
Technically you can. Just create Picture or Glance Cards and insert those inside the Swiper Card. Then use the correct parameters and components (like navigation and/or pagination). Then you have what you showed in the demo.
1 Like
I tried to make a simple example and Iâm not sure that what Iâm trying to do is possibleâŚ
In fact the âThumbsâ component is a way to sync two swipers so the main swiper has another instance of a swiper in parameter 
So two question about the code example below (which doesnât work) :
- Is vertical stack the right way to do it?
- Can I instantiate my sub swiper in the main swiper ?
type: vertical-stack
cards:
- type: 'custom:swipe-card'
title: MainSwiper
parameters:
navigation: null
keyboard:
enabled: true
onlyInViewport: true
Thumbs:
swiper: SubSwiper
autoScrollOffset: 1
cards:
- type: sensor
entity: sensor.temp_chambre
- type: sensor
entity: sensor.temp_1
- type: sensor
entity: sensor.temp_2
- type: sensor
entity: sensor.temp_3
- type: 'custom:swipe-card'
title: SubSwiper
card_width: 185px
parameters:
freeMode: true
grabCursor: true
spaceBetween: 10
watchSlidesVisibility: true
watchSlidesProgress: true
slidesPerView: 2
cards:
- type: sensor
entity: sensor.temp_chambre
- type: sensor
entity: sensor.temp_1
- type: sensor
entity: sensor.temp_2
- type: sensor
entity: sensor.temp_3
Thanks for your advice 
Is there a way to have the cards auto swype? I have all my notifications setup but I want them to auto scroll and also somehow hide the pages without any active notifications.
Well figured out autoscroll but I still need to to hide inactive cards, anyone with a tip?
- type: 'custom:swipe-card'
parameters:
spaceBetween: 0
scrollbar:
hide: true
draggable: true
snapOnRelease: true
effect: cover
slideShadows: true
autoplay:
delay: 1000
speed: 2000
cards:
- type: entity-filter
state_filter:
- 'on'
- armed_home
- armed_away
- cool
- Clean
- heat
- '1'
- '2'
- '3'
- '4'
- open
show_header_toggle: false
entities:
- entity: alarm_control_panel.home_alarm
icon: 'mdi:alarm-light'
name: House Armed
- entity: >-
cover.linear_nortek_security_control_llc_gd00z_4_garage_door_opener_remote_controller_barrier_state_label
name: Garage Door
- entity: input_boolean.mail_flag
name: Mail Here
- entity: switch.inovelli_unknown_type_ff00_id_ff07_switch
name: Hose On
- entity: input_boolean.trash_out
name: It's Trash Day!
- entity: input_boolean.recycle_out
name: It's Recycling Day!
- type: entity-filter
state_filter:
- 'on'
- armed_home
- armed_away
- cool
- Clean
- heat
- '1'
- '2'
- '3'
- '4'
- open
show_header_toggle: false
entities:
- entity: binary_sensor.aerogarden_farm_left_need_water
name: Farm Left Needs Water
- entity: binary_sensor.aerogarden_farm_right_need_water
name: Farm Right Needs Water
- entity: binary_sensor.aerogarden_grandma_s_bounty_left_need_water
name: Bounty Needs Water
- entity: binary_sensor.aerogarden_farm_left_need_nutrients
name: Farm Left Needs Nutrients
- entity: binary_sensor.aerogarden_farm_right_need_nutrients
name: Farm Right Needs Nutrients
- entity: binary_sensor.aerogarden_grandma_s_bounty_left_need_nutrients
name: Bounty Needs Nutrients
- type: entity-filter
state_filter:
- 'on'
- armed_home
- armed_away
- cool
- Clean
- heat
- '1'
- '2'
- '3'
- '4'
- open
show_header_toggle: false
entities:
- entity: switch.jasco_products_14288_duplex_receptacle_switch
name: Attic Fan On
- entity: climate.home
name: Central Thermostat
- entity: switch.dehumidifier_switch
name: Dehumidifier is On
- entity: sensor.vacuum
name: Rosie 5 MK2
- type: entity-filter
state_filter:
- 'on'
- armed_home
- armed_away
- cool
- Clean
- heat
- '1'
- '2'
- '3'
- '4'
- open
show_header_toggle: false
entities:
- entity: input_boolean.aloe_water
name: Aloe Plant Needs Water
- entity: input_boolean.croton_water
name: Croton Plant Needs Water
- entity: input_boolean.dragon_tree_water
name: Dragon Tree Plant Needs Water
- entity: input_boolean.front_garden_water
name: Front Garden Needs Water
- type: entity-filter
state_filter:
- 'on'
- armed_home
- armed_away
- cool
- Clean
- heat
- '1'
- '2'
- '3'
- '4'
- open
show_header_toggle: false
entities:
- entity: binary_sensor.updater
name: HassIO Update Pending
- entity: sensor.hacs
name: Hacs Update Pending
Hi, auto scroll is working for me with this config :
preview:
type: 'custom:swipe-card'
title: Backyard
card_width: 185px
start_card: 2
parameters:
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
autoplay:
delay: 2000
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
pagination:
type: bullets
cards:
- type: sensor
entity: sensor.temp_1
name: temp_1
line_width: 6
line_color: '#FF6384'
- type: sensor
entity: sensor.temp_2
name: temp_2
line_color: '#36A2EB'
line_width: 8
- type: sensor
entity: sensor.temp_3
name: temp_3
line_color: '#ffce57'
line_width: 8
- type: sensor
entity: sensor.temp_4
name: temp_4
line_color: '#4BC0C0'
accuracy: 8
line_width: 8
But I donât know for hiding inactive cardsâŚ
Thanks, got auto working but now I have the t.setConfig error and cant get it to go away. Tried downgrading and clearing cache but its still there
Recently I had a problem with Nginx cache⌠Just in case keep it in mind when you made modifications and it doesnât work after clearing browser cache 
Where is that cache and when you cleared it did the t.set error go away?