Lovelace: Swiper card

mattbruman · December 3, 2020, 3:17pm

Any update on the “t.setConfig is not a function” error? I was hopeing it would have been fixed with the new grid card but im still getting it. Getting “t.setConfig is not a function” every time its in any nested card.

So it loads 100% of the time if i go into edit mode and move the tab its on either left or right then move it back. This works for about a day then something internal refreshes and I then get the error again, this also causes a annoying issue of triggering the notification that the frontend has changed and needs to refresh.

Tobiasn2005 · December 19, 2020, 2:11pm

Love this card and I’m using it to swipe between two picture-elements cards for my groundfloor and first floor floorplan.
On these I have different light entities that I can control by a long-press (which calls the browser_mod service) which shows different controls.
Used this card two combine those two views into one swipe card.
However the long press on an entity on each of the picture elements cards doesn’t respond anymore.
Anyone knows how to fix this?

marcodb82 · December 31, 2020, 9:11am

Hy, thank to your works.
I try it with card type: picture-entity but every picture in swipe card appear in black and white ?
How i can visualizze in color?

thank

elyisum · January 5, 2021, 7:28pm

Hi
I use custom:mini-media-player in a swipe card and I would like to use the volume slider. Is it possible to disable swipe on a card ?
Thanks

cdopp · January 5, 2021, 11:43pm

Has anyone figured out a way to make the swiper card switch to a specific card? I would love to have a button or UI element switch to a different card than is currently displayed (ie. card 2 out of the 3). I believe the underlying code used by the card supports it, but have no idea if anyone has figured out how to do it from lovelace.

ASNNetworks · January 6, 2021, 12:25am

I don’t think it’s possible, since a button would need a service call to envoke swiper card, which swiper doesn’t have. It would need to be a custom component instead of only a custom card.

But honestly, what’s the point in using swiper card if you want to use buttons or other UI elements. That defeats the whole purpose of swiping the card (it’s in the name).

You are better off using state-switch card in your case. I use that myself as well for some elements. That card allows you to switch to different cards/views and use hash and entities to envoke it. See -> https://github.com/thomasloven/lovelace-state-switch

cdopp · January 6, 2021, 12:53am

Well, I am trying to set up a swiper card that contains three picture-elements cards that represent floors of my house. You are free to swipe between them. The picture element cards have buttons that represent going up or down stairs (among others). When they are clicked I wanted the swiper to switch to the corresponding card.

I have been playing around with this to replace three separate lovelace pages that have buttons with navigation actions. The swipe action seems like a nice way to swap pages. Oh well.

I will take a look at the lovelace-state-switch card you mentioned. That’s yet another card that I wasn’t aware of.

Thanks for taking the time to respond. I really appreciate it.

ASNNetworks · January 6, 2021, 1:10am

Then state-switch is definitely the way to go. I use that as well to switch between different layouts. It takes some practice and reading the docs, but once you get started it’s pretty straight forward. In your case the hash option would be best.

Make sure you create buttons with tap action that navigate to a hash url and you can switch views with a press of a button Also you can add transitions if you like an animation.

alnavasa · January 7, 2021, 8:57pm

how can I change the color of the arrows and the dots?

Is it possible to move the arrows higher? they are somehow not in the nicest area.

type: 'custom:swipe-card'
card_width: 100%
start_card: 1
reset_after: 30
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
  navigation: null
  keyboard:
    enabled: true
    onlyInViewport: true
cards:

Herian · January 20, 2021, 12:28pm

I have the same.issue

TommyWelle · February 19, 2021, 8:16am

Anyone gotten this to work with the new Apex Chart?

ASNNetworks · February 19, 2021, 8:24am

What’s there to not work? I have all kinds of cards inside a swiper card (mini graph, media player, horizontal-stack, weather card, markdown). Unless there is some bug, which you should report, it should work like all other cards.

TommyWelle · February 19, 2021, 8:48am

Dont know what im doing wrong, but when i use custom:mini-graph-card, it works great, but when i try to add the apex card, i just get errors.

TommyWelle · February 19, 2021, 8:52am

type: 'custom:swipe-card'
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
cards:
  - type: 'custom:apexcharts-card'
    cards: null
    entities:
      - sensor.multi_stua_temp
      - sensor.multi_stua_fuktighet

ASNNetworks · February 19, 2021, 9:01am

First try the apexchart-card on it’s own. My first guess is that you have apexchart-card not setup correctly (since I use numerous advanced nested cards inside swiper card withou issues).

Can you verify that the card does work outside of swipe-card? If you still get errors, see here for help -> ApexCharts card - A highly customizable graph card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)

TommyWelle · February 19, 2021, 9:02am

Yeah, it does work on it’s own.

It’s only when i try to add them beneith swipe-card i get errors.

ASNNetworks · February 19, 2021, 9:08am

and if you remove cards:null ? I don’t see that variable on apexchart docs anywhere, so that shouldn’t be there anyway.

Btw, you have the card setup different than how the docs tell you to use it. This is the minimal config:

type: custom:apexcharts-card
series:
  - entity: sensor.temperature

I would first try that inside swipe-card and move from there. Change the entity to one of your own sensors.

So:

type: 'custom:swipe-card'
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
cards:
  - type: 'custom:apexcharts-card'
    series:
      - entity: sensor.multi_stua_fuktighet

If this still doesn’t work, you should create a github ticket. If it does work, then move from there and follow the apexchart-card docs.

TommyWelle · February 19, 2021, 9:16am

Thanks alot, i just learned how to build a a nested card. Never really understood it, still learning yaml. But now i understand you have to set it up according to the card config

This is my final setup and it’s working.

type: 'custom:swipe-card'
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
cards:
 - type: 'custom:apexcharts-card'
   series:
      - entity: sensor.multi_stua_temp
        color: '#e74c3c'
        type: line
        name: Gangen
        group_by:
          func: max
          duration: 30min
        extend_to_end: true

ASNNetworks · February 19, 2021, 9:28am

Great! Once you get the hang of nested cards and work a lot in YAML, it get’s very easy and you see them as blocks you can just nest and build your UI with

kaylasiemon · February 26, 2021, 12:15am

Does anyone know how I would remove the background dark parts between the cards?

Here is my code:

          - prefix: Main Bedroom
            <<: *title
            style:
              top: 53%
              left: 25%
              <<: *title-style
          - type: custom:swipe-card
            start_card: 1
            parameters:
              effect: coverflow
              speed: 650
              spaceBetween: 20
              threshold: 7
              coverflowEffect:
                rotate: 80
                depth: 300
            style:
              top: 56.55%
              left: 35.8%
              width: 20.97%
              height: 1px
              color: transparent
              --ha-card-border-radius: .88vw
            cards:            
              - type: picture-elements
                image: /local/Render/transparent.png
                elements:
                  - type: custom:button-card
                    entity:  light.main_bedroom_light_2
                    Name: Light
                    custom_fields:
                      icon_chan: *icon_chan
                    styles: *icon_chan_styles
                    style:
                      top: 23.9%
                      left: 23.8%
                      width: 47.7%
                    template: light

...