Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
267

@Bram_Kragten and @thomasloven I use your swiper card and I try to use it in a popup card. Now the cards will display fine, but it takes from 2 to 5 seconds to be able to swipe on an iphone x (it is scrollable but it will hang halfway the animation). Once it is loaded after those 2/5 seconds it will work perfectly fine, until you close the popup and open it again.

The swiper card does not do this on a regular view. I have tried it with different configs and I even switched to browser-mod to see if that would be any better (and actually it has a little bit but only when the card is bugging like the screenshot)

image
image1125×2436 176 KB

As you can see in the screenshot it is bugging (it shows the card twice!) but funny thing is, when the card does this it will work immediately, most of the time.

If it shows it the way it should be, the screen will hang halfway for a few seconds like this:

image
image1125×2436 115 KB

This problem only occurs with the swiper card on a popup card (be it via popup-card or browser-mod, they both have similar results). It works perfectly fine with any other card. Any ideas?

268

Is it possible to navigate directly to a card within the swiper? I tried looking around, but didn’t see any related questions/answers.

I have button cards for each room/room temp, and a swiper card below, which includes graphs of the room temperatures. I’d like to click the temperature button for a room and have the associated graph display in the swiper. I think this would be possible using lovelace-state-switch, but I’d have to give up the swiper function.

1 Like
269

Conditional cards would be a better solution than state-switch as this is a core feature. I don’t think it is possible though what you ask. I was looking for this as well. But swiper gives me too much headaches, it doesn’t run smooth. It always hangs for 2 to 5 seconds when used in a popup card and I even tried to put the views in swiper. This looks amazing and the coverflow effect really is cool. But it is so laggy that I got frustrated using it at all.

It does work fine on standard views when I don’t use many cards. For graphs like your situation this card works perfectly fine.

I’d try a conditional card anyways, saves you installing state-switch (unless you are looking for user-specific cards you can do everything with conditional cards).

I hope one day this swipe card will be able to render entire lovelace views without lag (and without the accidental clicks on swipe) this card would be so awesome. (It still is but only for smaller projects).

270

This is awesome! Can this be added to HACS?

1 Like
271

Is it possible to integrate a “title” to this awesome card?

I´m not a programmer but would be glad if anyone could tell me what I´ve to adjust to get a title

Bye
Nic

272

Hello,
I am trying use swiper card with slider cards. Is it possible to disable draggable and use only navigation?
Thank you for answer.

273

@Nesty, here is the code I use for my thermostat cards. I tap the arrows to change between the up and dowstairs tstats. Look at the parameters specifically.

          - type: custom:swipe-card
            parameters:
              centerInsufficientSlides: true
              navigation:
              slidesPerView: 'auto'
              spaceBetween: 0
              nested: true
              allowTouchMove: false
            cards:
              - entity: climate.downstairs
                type: thermostat
                style: |
                  ha-card {
                    margin: 0px 4px 4px 4px;
                  }
              - entity: climate.upstairs
                style: |
                  ha-card {
                    margin: 0px 4px 4px 4px;
                  }
                type: thermostat

How it looks:

image

2 Likes
274

Thank you! allowTouchMove: false is the magic :smiley:

1 Like
275

Has anyone tried using the direction: ‘vertical’ in order to vertically navigate through cards instead of horizontally? I haven’t figured out where to insert this parameter mentioned in the https://swiperjs.com/api/ page.

276

You could simply put in a markdown card at the top and have the card set up to be transparent.

Example below:

image
image1125×2436 390 KB
image
image1125×2436 358 KB

277

@Bram_Kragten I know it is still a beta, but I would like to mention that the swiper-card doesn’t work with HA 0.101.x as of yet. See screenshots below what I mean. I have tried to remove everything but the swiper-card and it seems the swiper-card is causing this problem (when commenting the swiper card it works perfectly fine). It also works fine with older versions (and the current stable version).

Like I said it is still in beta, though I still felt I should mention it as it might be something breaking.

image
image1125×2436 609 KB
image
image1125×2436 284 KB
image
image1125×2436 306 KB

This is what it should actually look like:

image
image1125×2436 580 KB

278

Hi,

How can I change the color of the arrow? Is it possible?

swipe
swipe794×124 26.7 KB

Thanks

279

Is it possible to use a navigate type command to jump between slide cards.
I’d like a button without the panel that would jump to another panel within the slide?

Thanks

280

Hi @jimz011
I really like the way your dashboard looks.
Would it be possible to share your lovelace yaml please? :angel:

281

@Tagazok ofc, https://github.com/jimz011/homeassistant/

Though, you might prefer my current looks:

Click here for video
Click here for my thread

282

@marat did you got this issue solved? I see the same issue on my set up

283

Hi
Thanks alot for the great work with this card.
I made a autoplay swipe-card with 3 weather location cards that plays nice.
But if you go to another tab/screen and then come back again the autoplay is disabled (or not animating anymore). Going to the hamburgermenu (or manually draging the weather cards) and updating the lovelace configuration gets the autoplay going again

      - type: custom:swipe-card
#        start_card: 1
        parameters:
          effect: flip
          slideShadows: true
          autoplay:
            delay: 7000
          speed: 3000
 #         pagination:
 #           type: 'bullets'
          scrollbar:
            hide: true
            draggable: true
            snapOnRelease: true
        cards:
          - type: custom:weather-card
            entity: weather.smhi_nobel
            name: MalmĂś Nobel
          - type: custom:weather-card
            entity: weather.smhi_are
            name: Åre
          - type: custom:weather-card
            entity: weather.smhi_salen
            name: Sälen

(btw this is my second post ever and first time encluding code so I hope I got it right)

284

You can do this:

              autoplay:
                disableOnInteraction: false

This won’t fix the cards stopping the animation, however simply touching a single card (tap, swipe, slide whatever) will make the animation start again. This is how I use it in my own setup.

285

Jup, found that also, to bad it doesn’t come back on when going from tab to tab.

286

Both cards are installed. Mini Graph card works fine alone but not working here with the swipe card.

No card type configured.
- type: 'custom:swipe-card'
  parameters:
    spaceBetween: 8
    scrollbar:
      hide: false
      draggable: true
      snapOnRelease: true
  cards:
    - type: 'custom:mini-graph-card'
      entity: sensor.basement_sensor_relative_humidity_measurement
      name: Temperatuur
    - type: 'custom:mini-graph-card'
      entity: sensor.living_room_sensor_relative_humidity_measurement
      name: Luchtvochtigheid
    - type: 'custom:mini-graph-card'
      entity: sensor.master_bedroom_sensor_relative_humidity_measurement
      name: Licht