Lovelace: Swiper card

thanks a lot. it’s work now

Is there a way to add a small arrow to create a drawer…

Ok one picture :wink:

this is what I have today using the fold-entity-row.js

And what I mean
2

In fact just sliding (show/hide) an horizontal glance would be fine but may be it’s easier from this card itself :wink:

Thanks

hello.
can someone confirm, this swipe card works after upgrade ha to 0.85 (and 0.85.1)?
mine stops working… :frowning:

I installed for the first time yesterday on 0.85.0 and it works.
I will add that it is very slow to start up (10-30sec)…not sure if it is just my system or something else.

I’ve had a couple of issues using this with the map card (I was trying to display two maps, one with people and one with objects, such as keys). The first issue is that, using the standard map card, the swiper card doesn’t appear to pass the entities to the card and the map defaults to showing London with no entities displayer. Here is the configuration I used :

- type: custom:swipe-card
  parameters:
    centeredSlides: true
    slidesPerView: 'auto'
    spaceBetween: 8
    pagination:
      type: 'progressbar'
     navigation:
     keyboard:
       enabled: true
       onlyInViewport: true
  cards:
    - type: map
      title: People
      entities:
        - device_tracker.my_phone
        - zone.home
        - zone.work
     - type: map
       title: Objects
       entities:
         - device_tracker.bag
         - device_tracker.keys
         - zone.home
         - zone.work

I could work around this using a custom map card I created, which is actually just a wrapper around the standard one but inverts the colours of icons for zones (I created this as a workaround for an issue with zone icons when using a dark theme). With the custom card the map displays correctly. However, there is still an issue when swiping since this causes the map to scroll. Is there any way to completely disable swiping and just use the navigation buttons?

I’m having issues as well: it works for picture-glance cards (albeit very, very slowly), and it doesn’t work anymore for a simple entities list card.

I’m using it for gauge and it doesn’t appear after upgrade anymore

Same here, will load but slowly and only state icons will show up in a picture-element card, not the state labels.

There is problem with gauge, that is fixed in the next version of Home Assistant

I am working on a new version of this Swiper card that uses Lit, should take care of performance problems.

Here is a beta version of the new Lit version, if someone would like to help test, that would be appreciated :slight_smile:
https://raw.githubusercontent.com/bramkragten/custom-ui/swipe-lit/swipe-card/swipe-card.js

Btw, if you experience flickering on loading, that should be fixed in the next version of Home Assistant.

Getting this error with the new version in the console Uncaught SyntaxError: Unexpected token {

And in HA it shows Custom element doesn't exist: swipe-card.
Have placed the file in the same folder as the old version and updated the version under resources:.

What browser do you use?

The browser is Chrome.

What platform/version? And on what line number is the error?

Do you have type: module?

resources:
  - url: /local/custom-lovelace/swipe-card/swipe-card.js
    type: module

I testing this new version right now.
On Firefox and Chrome there is no trend lines on cards and on on Firefox cards sometimes just disappears.

What is your config?

  - type: custom:swipe-card
    card_width: '185px'
    start_card: 2
    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: sensor
        entity: sensor.looko2v3_pm1
        line_width: 8
        line_color: '#FF6384'
      - type: sensor
        entity: sensor.looko2v3_pm25
        line_color: '#ffce57'
        line_width: 8
      - type: sensor
        entity: sensor.looko2v3_pm10
        line_color: "#4BC0C0"
        accuracy: 8
        line_width: 8

I’m using 0.85.0 HA version.

The config for the sensor card was changed:

Add graph: line to your card config.

1 Like

How could I skip this? Thanks!