Is there a way to set parameters for an individual card within the swipe-card? For example, it will be nice to specify how much time to stay in a particular slide within a slideshow.
Also, is there a way to hide a card?
Is anyone seeing a problem âno box-shadows are displayed for the cardâ?
Possible workarounds are described on the link above.
answered: added a 3d option in the issue. have cards use their own (identical) box-shadow
Check my answer, it does not help, the parent âswipe-cardâ is clipping the inserted cards due to its âoverflow: hiddenâ style.
The only way is to put the whole âswipe-cardâ into some card with box-shadow or add box-shadow to the âswipe-cardâ itself.
Did you ever figure this out?
@ASNNetworks I read your old post where you stated that you have used the swiper card within all the other cards so I am hoping that you might be of some help. I am using @thomasloven layout-card and the view type is set to Grid (layout-card). For some reason, depending on what card I use and how I set it up the swipe card will break the grid layout causing it to stretch out or extend the browser vertically. Switching to another view fixes the problem but I canât figure out exactly whatâs happening within the grid view or how the use of another card such as the vertical-stack, horizontal-stack, grid, etc is breaking it. Do you have any suggestions.?
EDIT: So after trying all types of card and layout combinations I think I finally found a way to fix the breaking layout. There might be more than one solution (something probably involving setting the size of the cards) so if anyone has another way please let me know.
After trying all types of card configurations I switched my focus from the cards to the layout settings. In my grid layout, I was using auto and the flexible fractional unit of 1fr to determine the size of the grid-template-columns and the grid-template-rows. Changing, the settings of the row had no effect but changing the settings of the column did. For every column that I used 1fr I replaced it with the equivalent percentage. So for example, I changed grid-template-columns: 1fr 1fr 2fr to grid-template-columns: 25% 25% 50%. This seems to have fixed my problem and the swipe-card and grid layout now seem to be working together with no issues.
2 Likes
Hi, sorry I was away for holidays and didnât check the forum much. Glad you got it sorted and wrote up a short tutorial for others that might encounter the issue you were having.
Did you get it to work? Would love to see your code, trying to build the same thing right now.
is it possible to get the slidesPerView and centeredSlides to work together so you only see one card with the navigation buttons outside the card?
wanting to look like the example above but not show a card on the left or right side and have the navigation arrows not overlap the center card.
Hi @PhAzE, did you ever perfect your vertical scrolling? I am trying to have a vertical scroll within a defined size stack, but it doesnât actually scroll. It only snaps back to its current position, Iâm also guessing because it thinks the swiper card is much bigger than the viewable size?!?!
code:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: true
border_radius: true
background: true
outer_padding: true
style: |
ha-card {
border-radius: var(--border-radius);
box-shadow: none;
height: 85vh;
}
cards:
- type: custom:swipe-card
style: |
ha-card {
height: 85vh;
}
parameters:
# autoHeight: true
slidesPerView: 'auto'
allowTouchMove: true
spaceBetween: 8
direction: 'vertical'
scrollbar:
hide: true
draggable: true
snapOnRelease: true
cards:
It looks correct in the card itself, but just doesnât scroll to the bottom. There are another 3.5 cards below the one that can be seen, I can see them when I try to scroll down but as I said it just snaps back. I really just want it to mimic a stock standard scrolling within a container like this: Swiper demo
Would have thought it would be simple!!!
Hey there, anyone having issues with the card?
I just added the card as explained int he original GitHub page but canât seem to make it work. Here is my current card configuration:
- type: custom:swipe-card
cards:
- type: sensor
entity: sensor.first_floor_bathroom_temperature_sensor
name: Temperature
I allways get the error of: No card type found
Should I do anything (already restarted) after adding the resource?
Cheers in advance
Are you using YAML or GUI? If itâs GUI you need to remove the -, like this.
type: custom:swipe-card
cards:
- type: sensor
entity: sensor.first_floor_bathroom_temperature_sensor
name: Temperature
Because now your dashboard is looking for a card type, but doesnât see it since you didnât use it correctly, resulting in that error. Has nothing to do with swipe-card itself.
You can also just select swipe-card from the menu in the GUI if youâre using that and the card is installed correctly.
If youâre using YAML, then you need to do some more testing and show a bigger snippet of code and screenshot. The hyphen (-) means your swipe-card is part of something else and is nested.
What are all the possible values of effect:
- type: custom:swipe-card
parameters:
effect: ???
Kindly guide
any update or fix?
Nah gave up and went horizontal instead 
Thank you so much, never remembered to try this way
I was using the GUI but for some reason was not finding the Swipe-card to select from and went manual creating problems for myself
Thatâs some good knowledge I was not aware of. Hyphen means nested.
Once again thanks for the solution
1 Like
Hello, I wanted to ask if any of you have happened: I created a swipe-card, it gives me a problem when I open HA and the page where the swipe-card is displayed gives me an error like: "t.setConfig is not a function "then if I update using the three dots at the top right the card works regularly, the problem recurs if I exit the page and return. I state that I have done the emptying of the history of the web and in any case it does so in all peripherals from PC from Tablet and mobile. the code is as follows:
- type: horizontal-stack
cards:
- type: custom:swipe-card
parameters:
effect: 'coverflow'
grabCursor: true
centeredSlides: true
slidesPerView: 'auto'
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows : true
pagination:
type: 'bullets'
cards:
- type: picture-glance
style: |
ha-card {
background: transparent;
border: solid 1px rgba(100,100,100,0.3);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
}
camera_image: camera.strada
camera_view: live
title: Strada
entities:
- switch.scorrevole
- type: picture-entity
style: |
ha-card {
background: transparent;
border: solid 1px rgba(100,100,100,0.3);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
}
entity: camera.ip_webcam
camera_view: live
show_state: false
name: Tablet
Earlier in the feed, I read a solution to your problem.
1 Like
Hey, iâm after the same thing, any luck finding the solution?