I think this code refers to the swipe-navigation.js file right? Seems familiar to me. But this is not the swipe navigation card, this is a card to swipe within the card, not the entire view 
Ok, I understand, it is a good idea!
I second that. I have some input_text and input_select that only works when right-click them.
This only happens when I access Home Assistant on my computer. On my phone it works ok.
Started using this swiper card yesterdey, loving it. Thanks for sharing!!!
Is there any other way of stopping unintentional taps when swiping, other than setting tap_action: none ?
Iām trying to use swiper-card to swipe between two glance cards with temperature and humidity levels, but I still need to retain the ability to tap on an entity to see the individual graph. Since this card is specifically for swiping on touch devices does this not create issues for others? The swipe action always results in one of the entities popping up. Iāve tried the following options below without any luck. Using android mobile device.
- type: custom:swipe-card
parameters:
spaceBetween: 8
preventClicks: true
preventClicksPropagation: true
touchStartForcePreventDefault: true
scrollbar:
hide: false
draggable: true
snapOnRelease: true
cards:
- type: glance
show_header_toggle: true
entities:
- entity: sensor.temperature_hallway
name: Hallway
- entity: sensor.sitting_room_temperature
name: Sitting Room
- entity: sensor.temperature_kitchen
name: Kitchen
- entity: sensor.temperature_back_room
name: Back Room
- entity: sensor.temperature_master_bedroom
name: Bedrooms
# tap_action: none
- type: glance
show_header_toggle: true
entities:
- entity: sensor.humidity_hallway
name: Hallway
- entity: sensor.humidity_kitchen
name: Kitchen
- entity: sensor.humidity_back_room
name: Back Room
- entity: sensor.humidity_master_bedroom
name: Bedrooms
1 Like
I too would love to know.
I had the same problem when using buttons that activate a scene. Makes tap_action unusable with slider as it will always activate a scene. I use the same card for my temperature sensors (which have a tap_action as well) and it works perfectly fine there.
A temporary solution is to make a little empty space somewhere in the swiper area (for example using a blank button card and specify its width). Ugly but it would work.
2 Likes
Hi, this is a great card for what I want, however, I would like to also use the vertical and horizontal stack cards with button-card. TO make multiple cards like the image shown here.
Is this supported? I canāt get this to work but I may be doing something wrong 
Yes, it is.
Some of the code:
- color: 'rgb(223, 255, 97)'
color_type: card
icon: 'mdi:arrow-down-bold-outline'
styles:
card:
- width: 50px
- height: 50px
tap_action:
action: call-service
service: media_player.rotel_send_command
service_data:
command_name: ENTER
entity_id: media_player.rotel_rsp_1570
type: 'custom:button-card'
- color: null
color_type: emty-card
styles:
card:
- width: 50px
- height: 50px
- box-shadow: none
- background: none
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
parameters:
draggable: true
hide: false
pagination:
type: bullets
scrollbar: null
snapOnRelease: true
spaceBetween: 8
path: /local/custom-lovelace/swipe-card
type: 'custom:swipe-card'
2 Likes
Hi, thanks this looks like what I need to do! I may need more info from you to get this working Let me try what you have provided then I will get back to you if I canāt get it working!! Great news as this looks something like what I need.
Cheers!
Dave
Hi all
Is it possible to swipe those two cards together?
- type: custom:mini-graph-card
name: CPU Proxmox, VM Hassio e VM NodeRed
align_state: center
icon: mdi:server
height: 30
line_width: 3
hours_to_show: 72
points_per_hour: 0.25
show:
extrema: true
labels: true
points: true
fill: false
entities:
- entity: sensor.cpu_load
name: Proxmox
color: red
- entity: sensor.processor_use
name: Hassio VM
color: green
- entity: sensor.nodered_cpu_load
name: Nodered VM
color: blue
- type: custom:mini-graph-card
name: Mem Free Proxmox, VM Hassio e VM NodeRed
align_state: center
icon: mdi:server
height: 30
line_width: 3
hours_to_show: 36
points_per_hour: 0.25
show:
extrema: true
labels: true
points: true
fill: false
entities:
- entity: sensor.available_memory
name: Proxmox
color: red
- entity: sensor.memory_free
name: Hassio VM
color: green
- entity: sensor.nodered_available_memory
name: Nodered VM
color: blue
This is the actual situation.
I would like to use a code like this, Iāve tried, but with no success.
- type: 'custom:swipe-card'
parameters:
draggable: true
hide: false
pagination:
type: bullets
scrollbar: null
snapOnRelease: true
spaceBetween: 8
Thanks
Use a horizontal-tack, and put the two graph card into it. Mock-up:
ā¦
entities:
- type: vertical-stack
cards:
- type: graph1
- type: graph2
1 Like
Just pushed an update that bundles everything it needs in 1 file. So no need anymore for the js and css folders. Also updated Swiper to the latest version.
I love the idea of this card soo, soo much, but the issue with accidental clicks (which happens all the time when sliding) on mobile devices makes it unusable for anything other than graphs more or less. There must be some way to solve this?
1 Like
Same problem here, it is why I only use it for graphs indeed. However if you want to use buttons the only way to do it as far as I know is to not define a tap_action. Only define a hold_action, this way it does work. However it is not a great solution.
I have another idea which might work, but you will need to have the custom:button-card to do this. Put the buttons in like you normally would, and add a lock to the buttons. (When locked the button requires a double tap to activate). So this way the lock will unlock and slide over to the next page. If the button is not pressed within 2 seconds again the button becomes locked again.
Not beautiful but I am pretty sure it will work.
A lock looks like this:
Hi,
Nice double iconā¦? How did you do that ?
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!