What do you mean with double icon? Do you mean the lock? It is a feature within the button card.
no, I mean the 2 computer icons on the left… or is that 1 icon (I must have missed before…)
nvm. its desktop-tower-monitor.
sorry, just never noticed that…
Haha yes it is the desktop-tower-monitor icon. I thought it was more nice than just a pc or monitor.
I am trying to figure out if there is an easier way to get the drop-shadows to show on my 2 thermostat cards. I am not sure if I am overthinking this or missing something. With the solution I figured out using card-modder, I am adding a margin so the card is resized slightly smaller to allow the shadows to show.
Basically I am trying to figure out - Is there a simple way to accomplish the same look (drop-shadow), and also make the card match the width of the other cards?
Configured per the instructions, you will notice the shadows missing, or rather I think they are covered by the thermostat card.
code:
- type: vertical-stack
cards:
- type: custom:swipe-card
parameters:
centerInsufficientSlides: true
navigation:
slidesPerView: ‘auto’
spaceBetween: 0
cards:
- entity: climate.downstairs
type: thermostat
- entity: climate.upstairs
type: thermostat
- type: custom:weather-card
entity: weather.forecast
PIC w/ shadows cropped on bottom, and side edges:
Here is how is the code and how it looks with adding a margin in card modder:
Code:
cards: - type: vertical-stack cards: - type: custom:card-modder style: margin: 0px 6px 6px 6px card: - type: custom:swipe-card parameters: centerInsufficientSlides: true navigation: slidesPerView: 'auto' spaceBetween: 0 cards: - entity: climate.downstairs type: thermostat - entity: climate.upstairs type: thermostat - type: custom:weather-card entity: weather.forecast
card-modder, showing shadows, but it is slightly less wide than the other cards, and has slightly more space between the bottom and top of the next card:
Sorry for not reaching back to you earlier @jimz011 got busy trying to figure this thing out properly. As you mention there are work-arounds, but I don’t find them to be what I want. So after banging my head against the wall for some time, I think I figure out how to fix this is most cases. I have created a PR here:
It is not very well tested, but it works for me using button cards at least. Feel free to give it a try and report back to me if it works or not. You can just use the swipe-card.js from my PR, it is updated with the changes.
2 Likes
I’m having a compatibility issue with the Decluttering card. When using a Decluttering card template within a Swiper card:
Copy to clipboard
decluttering_templates:
room_button_template:
default:
- entity: []
card:
type: custom:button-card
entity: '[[entity]]'
name: '[[name]]'
...
...
- type: custom:swipe-card
start_card: 1
parameters:
freeMode: true
slidesPerView: auto
iOSEdgeSwipeDetection: true
slideToClickedSlide: true
cards:
- type: custom:decluttering-card
template: room_button_template
variables:
- entity: sensor.living_room_ecobee_temperature
...
Swiper Card adds the slide classes to the decluttering-card DIV:
Copy to clipboard
<decluttering-card class="swiper-slide swiper-slide-active">...
Instead of the button card DIV:
Copy to clipboard
<button-card class="swiper-slide swiper-slide-active" ...
This causes each swiper slide to be stretched out. Any thoughts on how to fix this? Thanks in advance!
@Bram_Kragten and @thomasloven I use your swiper card and I try to use it in a popup card. Now the cards will display fine, but it takes from 2 to 5 seconds to be able to swipe on an iphone x (it is scrollable but it will hang halfway the animation). Once it is loaded after those 2/5 seconds it will work perfectly fine, until you close the popup and open it again.
The swiper card does not do this on a regular view. I have tried it with different configs and I even switched to browser-mod to see if that would be any better (and actually it has a little bit but only when the card is bugging like the screenshot)
As you can see in the screenshot it is bugging (it shows the card twice!) but funny thing is, when the card does this it will work immediately, most of the time.
If it shows it the way it should be, the screen will hang halfway for a few seconds like this:
This problem only occurs with the swiper card on a popup card (be it via popup-card or browser-mod, they both have similar results). It works perfectly fine with any other card. Any ideas?
Is it possible to navigate directly to a card within the swiper? I tried looking around, but didn’t see any related questions/answers.
I have button cards for each room/room temp, and a swiper card below, which includes graphs of the room temperatures. I’d like to click the temperature button for a room and have the associated graph display in the swiper. I think this would be possible using lovelace-state-switch, but I’d have to give up the swiper function.
1 Like
Conditional cards would be a better solution than state-switch as this is a core feature. I don’t think it is possible though what you ask. I was looking for this as well. But swiper gives me too much headaches, it doesn’t run smooth. It always hangs for 2 to 5 seconds when used in a popup card and I even tried to put the views in swiper. This looks amazing and the coverflow effect really is cool. But it is so laggy that I got frustrated using it at all.
It does work fine on standard views when I don’t use many cards. For graphs like your situation this card works perfectly fine.
I’d try a conditional card anyways, saves you installing state-switch (unless you are looking for user-specific cards you can do everything with conditional cards).
I hope one day this swipe card will be able to render entire lovelace views without lag (and without the accidental clicks on swipe) this card would be so awesome. (It still is but only for smaller projects).
This is awesome! Can this be added to HACS?
1 Like
Is it possible to integrate a “title” to this awesome card?
I´m not a programmer but would be glad if anyone could tell me what I´ve to adjust to get a title
Bye
Nic
Hello,
I am trying use swiper card with slider cards. Is it possible to disable draggable and use only navigation?
Thank you for answer.
@Nesty, here is the code I use for my thermostat cards. I tap the arrows to change between the up and dowstairs tstats. Look at the parameters specifically.
- type: custom:swipe-card
parameters:
centerInsufficientSlides: true
navigation:
slidesPerView: 'auto'
spaceBetween: 0
nested: true
allowTouchMove: false
cards:
- entity: climate.downstairs
type: thermostat
style: |
ha-card {
margin: 0px 4px 4px 4px;
}
- entity: climate.upstairs
style: |
ha-card {
margin: 0px 4px 4px 4px;
}
type: thermostat
How it looks:
2 Likes
Thank you! allowTouchMove: false is the magic 
1 Like
Has anyone tried using the direction: ‘vertical’ in order to vertically navigate through cards instead of horizontally? I haven’t figured out where to insert this parameter mentioned in the https://swiperjs.com/api/ page.
You could simply put in a markdown card at the top and have the card set up to be transparent.
Example below:
@Bram_Kragten I know it is still a beta, but I would like to mention that the swiper-card doesn’t work with HA 0.101.x as of yet. See screenshots below what I mean. I have tried to remove everything but the swiper-card and it seems the swiper-card is causing this problem (when commenting the swiper card it works perfectly fine). It also works fine with older versions (and the current stable version).
Like I said it is still in beta, though I still felt I should mention it as it might be something breaking.
This is what it should actually look like:
Is it possible to use a navigate type command to jump between slide cards.
I’d like a button without the panel that would jump to another panel within the slide?
Thanks
Hi @jimz011
I really like the way your dashboard looks.
Would it be possible to share your lovelace yaml please? 