Swipe Card - Cube effect

Configuration Frontend
1

I am trying to get a swipe card with the cube effect. I have seen it done in a dashboard video but cannot find any sample code not configuration settings for the swipe card.
Below is the best of what i could find as sample code but it does not do the cube transition.

I have a copy of the code i use below. Some different exaples i have looked at put custom:swipe-card in quotes, so i am not sure what the current syntax is. I think i am missing some parameters. Some examples do not even mention Cubes.

Does anyone have any suggestions on where I could find sample code or could correct my code.

Any assistantce would be appreciated.

type: custom:swipe-card
parameters:
  swipe_nav:
    wrap: true
    animate: cube
    swipe_amount: 30
cards:
  - type: entities
2

Here is the code I use for the ship card cube effect. Hope it helps!

type: custom: swipe-card
start_card: 1
parameters:
effect: cube
cubeEffect:
shadow: false
slideShadows: false
loop: true
nested: true
pagination:
type: bullets
clickable: true
cards:
- type:

3

Sorry, I’m not sure how to show the formatted yaml box in the form so I’m attaching a screen shot.

IMG_1039
IMG_1039562×533 61.1 KB

4

To get the yaml formatting right use the </> button after you paste the code and the code is still highlighted.

5

That appears to work with the cube affect. But it size is not coorrect for my iphone. I will play with the parameters.

Thanks for the solution.

6

I slowly tried each parameter eg change true to false or delete the line.
It was the Loop: true line had to be deleted.
Makes no sense to me, but I cannot find and documentation on setting these parameters.
So it looks ok on the mobile phone except for the page with tdv-bar-card. You can see the bar charts as the cube turns, but then they dissappear when you look at it stright on.

I will try removing the other parameters and if that does not fix the problem, I will delete that page.

But do you know where the cube parameter documentation is?

7

I just checked back on this thread, sorry for the late response.

While it’s not specific for the Home Assistant integration, you can find pretty much all the info you need on the Swiper.js site here: https://swiperjs.com/swiper-api#cube-effect.

To be honest I did just as you are doing and played around with the different optional settings in yaml until I got it to do what I wanted. I also used some card mod tricks to adjust the formatting on things that I couldn’t get just right with the swiper settings.

Thank you for the info on how to format yaml correctly in the forum by the way!! I appreciate it :slight_smile: