Does not help:
Made a swiper card with the custom Spotify card, works great on my test page but doesn’t work in a picture elements card.
type: custom:swipe-card
card_width: 185px
start_card: 1
parameters:
effect: cube
cubeEffect:
shadow: false
slideShadows: false
loop: true
autoplay:
delay: 3000
navigation:
nextEl: .swiper-button-next
prevEl: .swiper-button-prev
hideOnClick: true
pauseOnMouseEnter: true
cards:
- type: markdown
content: Kies een afspeellijst!
card_mod:
style: |
ha-card
{
--ha-card-background: transparant;
box-shadow: none;
width: 100%;
text-align: center;
padding: 80px 0;
font-weight: bold;
font-size: 50px;
line-height: 1.6;
- type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_dannywag
playlist_type: default
hide_warning: true
hide_top_header: true
hide_playback_controls: true
hide_currently_playing: true
display_style: grid
hide_connect_devices: true
limit: 6
card_mod:
style: |
div
{
border-color: ##ef1b1b !important;
gap: .0em !important;
border: solid 0px ##ef1b1b !important;
}
ha-card
{
--ha-card-background: transparant;
box-shadow: none;
width: 100%;
- type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_dannywag
playlist_type: featured
hide_warning: true
hide_top_header: true
hide_playback_controls: true
hide_currently_playing: true
display_style: grid
hide_connect_devices: true
limit: 6
card_mod:
style: |
div
{
border-color: ##ef1b1b !important;
gap: .0em !important;
border: solid 0px ##ef1b1b !important;
}
ha-card
{
--ha-card-background: transparant;
box-shadow: none;
width: 100%;
- type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_dannywag
playlist_type: discover-weekly
hide_warning: true
hide_top_header: true
hide_playback_controls: true
hide_currently_playing: true
display_style: grid
hide_connect_devices: true
limit: 6
card_mod:
style: |
div
{
border-color: ##ef1b1b !important;
gap: .0em !important;
border: solid 0px ##ef1b1b !important;
}
ha-card
{
--ha-card-background: transparant;
box-shadow: none;
width: 100%;
When i change effect: cube to coverflow it does work? Is cube not working in a picture elements card? Any idea?
EDIT: And the same for effect: flip…
Is it possible to use a template to set the start_card parameter? Trying to use this and it won’t work:
- type: custom:swipe-card
start_card: >
[[[ if (states['media_player.spotify_zach'].state == 'idle')
return 1; else return 2;]]]
Summary: if Spotify is playing I want it to start on my Spotify card, which is card 2. This has to be possible somehow, right?
1 Like
I don’t think it works, simply because swiper-card doesn’t support templates (nothing mentions that in the docs). You could try to nest swiper-card inside config-template-card and try to template it that way. In theory it should work.
Thanks for the suggestion! I’m willing to try anything because this will be the finishing touch on multiple dashboards. I’ve actually used the custom-config-template card for a few things, so I am familiar with it, but I can’t see how I’d wrap the swiper card inside it to make it templateable. Mind expanding on your idea with an example?
My observations - swipe-card works unstable inside config-template-card.
There are graphics artefacts, start-card does not work at all (even w/o templates).
Surely, an issue should be registered on GitHub…
Bummer. Thanks, lldar. I reached out to him on github to see if he can add template compatibility. Doesn’t appear he’s done much with the card for almost a year but it’s worth a shot.
I highly doubt that there will be any kind of change to the repository. It is already “archived”, that means in developer terms “Leave me alone with this ****”. 
The next thing is, this card is not really “configured” in a way like eg. button-card. The configuration options you see with this card are simply taken and added to the javascript of swiper.js. There is no “code” in this card, that is actively changing things. All things happen in swiper.js and not in swiper-card. This is not a bad thing, as it ensures a good functionality of the card, even without updates. It leaves the logic where it belongs.
But that makes it not so easy to change. You would need to implement the complete logic on a javascript level before you even “touch” swiper.js.
IMHO the best way would be, if someone (nope, not me unfortunately) would be willing to take over the project and maintain it for the future. Then you could work on these things.
I’m sorry, don’t want to be the bad guy here, just saying “don’t keep your hopes up” for a near future release. 
Thanks, paddy, I figured that was the case, but unfortunately it seems the card doesn’t work at all in any Home Assistant version past 11.0, so I’ll surely be re-thinking my dashboard configuration without the swipe card. Sad how perfect that card was, and how much more perfect it could have been
Hint: this is the perfect time, to step in and start that as a project for yourself. 
Fork the repo and see, what you can come up with. I’m sure, here in this very forum you will get help, if you don’t know how to do some things.
I can offer my help with setting up all the “administrative” things, like Github. But for the code I’m out at the moment, have already too much on my plate, and can’t take on another project, sorry!
Do you have any knowldege regarding this?
I appreciate the support but unfortunately this is far beyond my scope of knowledge. I’ve only been tinkering with home automation for a year and knew nothing of programming before this. Maybe someday I’ll understand more but right now I’m just lucky my Pi hasn’t erupted into flames yet.
1 Like
Is there any way to make this card swipe vertically? I tried to use direction: vertical under parameters and it doesn’t seem to work.
Works fine for me.
type: 'custom:swipe-card'
parameters:
allowTouchMove: true
effect: slide
direction: 'vertical'
cards:
So, when I add that, then add in a picture elements card under the cards section, it doesn’t know how to size things. Lets say I add 4 picture elements cards in that swipe card, all 4 are the same image/size/etc, swiper will add either a huge amount of space below each card, or the bottom will fall off the browser window and go forever (in a broken infinite bottom state).
Maybe it’s just a problem with picture-elements cards being used in swiper in vertical mode? Works fine in horizontal mode though.
If I add in slidesPerView: auto - the spacing corrects, but I can no longer swipe to the next card.
1 Like
Try:
autoHeight: true
I’ve got this currently:
type: custom:swipe-card
parameters:
initialSlide: 0
spaceBetween: 8
slidesPerView: auto
direction: vertical
autoHeight: true
cards:
I get it sized to the picture elements card correctly, but when i swipe up, its like it cannot swipe far enough to trigger the next card to snap, i can’t pull it higher than maybe 15% max before it stops. Like it’s not sizing correctly to the card height. Auto height does manage to snap the bottom of the view up correctly but swiping then doesn’t work.
Edit: I see whats happening here. The picture elements card is using a background image that is 600px in height, and lovelace will scale the cards to fix the screen size. Swiper is not getting the scaled height and is using the original background image size. This is why when I take off the slidesPerView option, it works but has huge gaps between the cards.
I’m not sure if there is a way to properly and dynamically fix the card height that swiper picks up without manually entering a height value. This will however change based on the screen size this card is displayed on since the scaling won’t match.
Maybe you can counter this by decreasing spaceBetween?
One thing I can confirm is that the vertical direction does not work as great as horizontal. I was messing around with the vertical parameters myself a lot as well (creating status alerts). Eventually I settled with this code which works. The cards inside are button cards with fixed height of 30px.
parameters:
allowTouchMove: true
autoHeight: true
height: 30
effect: slide
direction: 'vertical'
autoplay:
disableOnInteraction: false
waitForTransition: false
delay: 2500
reverseDirection: false
Yeah, it seems if I set the height variable manually i can get the sizing correct, but if the card inside is deemed larger (like the picture elements card for example which doesn’t pass the proper scaled sizing) then the swipe doesn’t work. So maybe i’ll need to encase it in somethign that i can dictate the size like you did with the button card.
Turns out I was able to set the spaceBetween option to a negative number to resolve the huge spaces for each slide. Thanks!
2 Likes
Hi,
After I upgrade card-mod to 3.1.1, my swipe cards don’t show entities, button- cards, only picture-entity show in browser pop-up window. If I try config without pop-up card, it works fine.
Without pop-up card:
With pop-up card:
Has anyone experienced such a mistake?
Thanks