This is an awesome card. Thanks @bram_kragten!
Is there any way to make the cards cycle through so when the last card is swiped, it returns to the first card as opposed to swiping back?
Hello!
I’ve started using this card on my current Lovelace dashboard, and I’ve realized that the hold_action is behaving rarely. When I try to open the “more-info” dialog, sometimes appears, and sometimes not. Sometimes, the normal click gets stuck, and it invoques the more-info dialog except of the normal tap-action.
Are you guys also experiencing this issue?
Thanks!
EDIT: It is working fine on mobile (iPhone), but not on my Computer (Windows 10 with Chrome and MacOS with Chrome and Safari)
It’s been asked before in this thread, but never answered I believe. Can you have it swipe to a certain card by an automation instead of a human touch?
Add autoplay as a parameter. For full settings check swiper API: https://swiperjs.com/api/#autoplay
Also use the search on this forum with ‘autoplay’, you’ll find examples you can copy/paste I’m sure 
That basically makes it loop through the cards automatically. I would like to be able to have it go to a specific card in an automation. E.g. focus on the current active mediaplayer.
Use conditional card then. Wrap each media player card inside it’s own conditional card. Then all inside a swipe card. That’s what I have set up myself. I have conditions set that each card only is visible when playing (and paused, otherwise it will hide when hitting pause!).
Alternatively you can tie the conditions that with a input_boolean for each card, instead of the media player entity and use that as a condition. Then with automation, hide all media cards except the one you want to show by turning input_boolean on or off.
3 Likes
Thanks!! I have something similar now. But it looks cooler to me if all media players are in a swipe carousel and based on the active player it automatically scrolls to the corresponding card.
1 Like
I don’t think it’s possible to control the frontend by using automations, except navigating to a different tab or opening popups (with browser mod for instance). I haven’t seen a component with that service at least.
Maybe Swiper has an API for that, but I doubt it can read the current state of an entity. Maybe it is possible by using a template to auto switch. Perhaps by using this card (and ask around there).
does anyone know how to get rid of that tsetConfig error? I have tried downgrading, but it randomly appears on my desktop fronted (Chrome), seems to work fine on mobile (Android)
Hi,
I use swipe-card with browser_mod, and it’s works fine with HA 112.4 and Browser _mod29. Atfer upgrade to HA 114.1 and browser_mod 1.1.6 the swipe-card is not working. Here is a simple example:
Browser:mod popup with swipe-card with 1 entity:
aspect_ratio: 5/2
color_type: card
entity: input_boolean.redony_vezerles
icon: 'mdi:format-line-weight'
show_name: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- cover.ablak_redonyok
type: entities
parameters:
allowTouchMove: false
centeredSlides: true
navigation:
keyboard:
enabled: true
onlyInViewport: true
pagination:
type: progressbar
slidesPerView: auto
spaceBetween: 8
type: 'custom:swipe-card'
deviceID:
- this
- dashboard
large: false
title: Covers
type: 'custom:button-card'
Browser:mod popup without swipe-card with 1 entity:
aspect_ratio: 5/2
color_type: card
entity: input_boolean.redony_vezerles
icon: 'mdi:format-line-weight'
show_name: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- cover.ablak_redonyok
type: entities
type: vertical-stack
deviceID:
- this
- dashboard
large: false
title: Covers
type: 'custom:button-card'
Is that Browser_mod bug, or swipe-card? Or user?
Thanks!
1 Like
Neither, it’s card mod and how browser mod works with that. Card mod and browser mod have been updated when HA 113 came out. It’s more powerfull, but you need to style the popup as well now. You can do this separately or through theme.yaml For more info read up on -> https://github.com/thomasloven/hass-browser_mod/issues/117
It has nothing to do with swipe card luckily, so you should be able to fix it using guides in that link.
1 Like
Thanks!
This resolved my problem.
1 Like
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;
}