ok, thanks. That is working. But everytime I restart HA, the 4 lines are gone…
i dont understand that …
I added this into my custom theme pack.
I also did, but it did not save it …
Strange… The card mod was working for me and now not as well.
I always have the problem on my mobile that it triggers the tap action as s soon as I try to swipe. Is there a workaround?
Hi!
I’ve been working on a swiper card for some time now and it displays my calendar, a sonos card , and a weather card.
Now I want to try to make it conditional to show a specific slide if a condition is filled.
For example if music is playing then display the sonos card.
If the time is inbetween 06:00-10:00, display the calendar card.
Right now I have the Sonos card as “start_card:” and thinking if that can be modified or maybe using the "swiper.slideTo(index, speed, runCallbacks)?
This is way over my coding skills.
Anyone have any input?
Just add a conditional card into your dashboard, then insert your Sonos card inside that.
Open your raw dashboard yaml, copy code and paste it inside your swipe card.
I usually set my swipe card up with three vertical stack cards that I nest my other cards in.
The is # addresses in the documentation to link to particular slides but I have not experimented with them
If I understand correctly this is what I’ve tried.
It does show the card I want but I lose the functionality of the swipe card.
When music is playing I want the sonos card-slide to be the slide that is showing and with a swipe I still want to be able to see my other cards, calendar for example.
If anyone have have experience with “swiper.slideTo”, please reach out 
Can you send your code and a screen shot?
Here’s the code for my current card without any conditions to display a certain slide(added title cards as placeholders):
Also attached a screenshot of what the card looks like:
type: custom:mod-card
card:
type: custom:swipe-card
card_width: 100%
parameters:
pagination:
type: bullets
clickable: true
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
spaceBetween: 8
coverflowEffect:
rotate: -50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
cubeEffect:
shadow: true
loop: false
cards:
- type: custom:mushroom-title-card
title: Place Holder Calendar
- type: custom:mushroom-title-card
title: Place Holder Music
- type: custom:mushroom-title-card
title: Place Holder Weather
style:
swipe-card$: |
.swiper-container {
margin: 0 0 0 0 !important;
padding: 65px 30px 10px 30px !important;
}
.swiper-pagination-bullets {
position: absolute;
top: 15px;
bottom: inherit !important;
width: 100%;
}
.swiper-pagination-bullets>span {
margin: 0px !important;
min-width: 100px;
min-height: 25px;
padding-top: 5px;
border-radius: 0;
background-color: rgba(0, 0, 0, 0.33); /* Set desired color here */
}
.swiper-pagination-bullets>span:last-child {
border-radius: 0px 10px 10px 0px;
}
.swiper-pagination-bullets>span:first-child {
border-radius: 10px 0 0 10px;
}
.swiper-pagination-bullets>span:nth-child(1):before {
content: "Calendar";
color: lightgray /* Change to desired color */
}
.swiper-pagination-bullets>span:nth-child(2):before {
content: "Music";
color: lightgray /* Change to desired color */
}
.swiper-pagination-bullets>span:nth-child(3):before {
content: "Weather";
color: lightgray /* Change to desired color */
}
3 Likes
I have a problem it won’t load on my Dashboards but it will on edit.
can someone help me
code:
type: custom:swipe-card
parameters:
spaceBetween: 8
scrollbar:
hide: true
draggable: true
snapOnRelease: true
cards:
- type: custom:mod-card
card:
type: grid
columns: 2
square: true
cards:
- type: custom:button-card
template:
- circle
- light
entity: light.living_licht
name: Living
icon: mdi:ceiling-light
size: 80%
show_state: true
aspect_ratio: 1/1
- type: custom:button-card
template:
- circle
- light
entity: light.eetkamer
name: Fan Light
icon: mdi:ceiling-light
size: 80%
show_state: true
aspect_ratio: 1/1
- type: custom:button-card
template:
- circle
- light
entity: light.living_luster
name: Fan Light
icon: mdi:ceiling-light
size: 80%
show_state: true
aspect_ratio: 1/1
- type: custom:button-card
template: base
entity: climate.livingroom
name: Termastaat
icon: mdi:thermostat
size: 80%
show_state: true
aspect_ratio: 1/1
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
content:
type: custom:mushroom-number-card
entity: climate.livingroom
display_mode: buttons
icon_color: primary
title: Edit Temperature
target:
entity_id: sensor.living_temperature
- type: custom:gap-card
height: 8px
style: |
ha-card {
max-width: 480px;
max-height: 480px;
margin: 0 auto;
padding: 8px;
}
- type: custom:mod-card
card:
type: grid
columns: 2
square: true
cards:
- type: custom:button-card
template:
- circle
- light
entity: light.living_licht
name: Living
icon: mdi:ceiling-light
size: 80%
show_state: true
aspect_ratio: 1/1
- type: custom:button-card
template:
- circle
- light
entity: light.eetkamer
name: Fan Light
icon: mdi:ceiling-light
size: 80%
show_state: true
aspect_ratio: 1/1
- type: custom:button-card
template:
- circle
- light
entity: light.living_luster
name: Fan Light
icon: mdi:ceiling-light
size: 80%
show_state: true
aspect_ratio: 1/1
- type: custom:button-card
template: base
entity: climate.livingroom
name: Termastaat
icon: mdi:thermostat
size: 80%
show_state: true
aspect_ratio: 1/1
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
content:
type: custom:mushroom-number-card
entity: climate.livingroom
display_mode: buttons
icon_color: primary
title: Edit Temperature
target:
entity_id: sensor.living_temperature
- type: custom:gap-card
height: 8px
style: |
ha-card {
max-width: 480px;
max-height: 480px;
margin: 0 auto;
padding: 8px;
}
is it possible with card-mod ?
type: custom:swipe-card
parameters:
pagination:
type: bullets
clickable: true
card_mod:
style: |
ha-card {
swiper-pagination-color: red
}
Hi, i like the swiper card, nice done.
But is there a way to set the start_card: number depending on a entity state?
i have made a overview from my monthly usages and would like that the cards start when its the correct month. Example jan = start_card 1, feb = start_card 2
did you happen to update card-mod to 3.5.0?
in that case you should delete the mod-card bit and adapt the modifications.
But, better yet, and the only official method:
update to card-mod 3.4.4 and keep the original modifications.
(there was a required update because of HA 2025.1, so card-mod 3.4.3 didnt work anymore and 3.5.0 was introduced. It contained a few hiccups though, so Thomas pulled 3.5.0, and updated 3.4.3 to 3.4.4, which is now the only valid version for HA users of 2025.1 + )
Currently no, but as the card’s last update was in 2022, you can probably easily add a config line such as calendar: true, then modify the javascript code that checks if the config has calendar: true, and if so, grab the current month, and set the start_card to that.
Does manually setting start_card work for you? I’ve had issues with it and have had to add a line to the javascript code in order to make it work.
1 Like
Hi, I was looking in these 800 comments but cannot find anything related to any autoplay feature.
Is there any way I can accomplish this?
Thanks!
IT should be possible if i understand the working properly
1 Like
Great!
This is working
type: custom:swipe-card
parameters:
effect: coverflow
start_card: 2
spaceBetween: 1
scrollbar:
hide: true
draggable: false
snapOnRelease: false
autoplay:
delay: 4000
disableOnInteraction: true
pauseOnMouseEnter: true
4 Likes
Dropdown elements are not shown when input_select is used within swiper card.
Any solution?
type: custom:swipe-card
parameters:
spaceBetween: 0
effect: fade
fadeEffect:
crossFade: true
autoplay:
delay: 5500
speed: 5000
pagination:
type: none
cards:
- type: entities
entities:
- input_select.sample