Lovelace: Swiper card

I just installed the new update. Unforttunately this plugin is now broken on Safari browsers. I get the following error: Can’t find variable: ResizeObserver. This occurs on all Safari (based) browsers I tested (macOS, iOS, iPadOS). Works fine on Chrome and other browsers (including on macOS Chrome).

I have to same issue.
Did you find a solution to fix this error? Or did you do a rollback?

Yes, I rolled back to a version earlier.

Thanks, got it working with the previous version 3.1.0.

Got the same error! cant seem to find that variable anywhere on https://swiperjs.com/api/#components

Broken on the mobile app for IOS as well.

Use swipe card version 3.1.0. The new release 3.2.0 causes this error. If you use HACS just select 3.1.0 and click reinstall. This will downgrade your swipe card.

Yep, got it working on 3.1.0, apparently Safari has an experimental implementation of the “Resize Observer” under safari settings in IOS but doesn’t seem to work on the mobile app.

1 Like

@Bram_Kragten Thank you for the fix, that was fast. New version 3.2.1 fixes the issue.

More observations…,

3.2.0 is broken on IOS 13.3 and below. works perfectly on my XR running IOS 13.4.1
https://caniuse.com/#search=resizeobserver

1 Like

Wow this is an absolutely awesome card! I’m preparing some kind of audio player for my 4 year olds and with this, they can easily swipe thru their music and play what they want.
Quick Question: Is it possible to give the card some kind of title? THis whould help better distinguish if there are multiple of those near each other.

This is an awesome card. Thanks @bram_kragten!

Is there any way to make the cards cycle through so when the last card is swiped, it returns to the first card as opposed to swiping back?

Hello!
I’ve started using this card on my current Lovelace dashboard, and I’ve realized that the hold_action is behaving rarely. When I try to open the “more-info” dialog, sometimes appears, and sometimes not. Sometimes, the normal click gets stuck, and it invoques the more-info dialog except of the normal tap-action.
Are you guys also experiencing this issue?
Thanks!

EDIT: It is working fine on mobile (iPhone), but not on my Computer (Windows 10 with Chrome and MacOS with Chrome and Safari)

It’s been asked before in this thread, but never answered I believe. Can you have it swipe to a certain card by an automation instead of a human touch?

Add autoplay as a parameter. For full settings check swiper API: https://swiperjs.com/api/#autoplay

Also use the search on this forum with ‘autoplay’, you’ll find examples you can copy/paste I’m sure :slight_smile:

That basically makes it loop through the cards automatically. I would like to be able to have it go to a specific card in an automation. E.g. focus on the current active mediaplayer.

Use conditional card then. Wrap each media player card inside it’s own conditional card. Then all inside a swipe card. That’s what I have set up myself. I have conditions set that each card only is visible when playing (and paused, otherwise it will hide when hitting pause!).

Alternatively you can tie the conditions that with a input_boolean for each card, instead of the media player entity and use that as a condition. Then with automation, hide all media cards except the one you want to show by turning input_boolean on or off.

3 Likes

Thanks!! I have something similar now. But it looks cooler to me if all media players are in a swipe carousel and based on the active player it automatically scrolls to the corresponding card.

1 Like

I don’t think it’s possible to control the frontend by using automations, except navigating to a different tab or opening popups (with browser mod for instance). I haven’t seen a component with that service at least.

Maybe Swiper has an API for that, but I doubt it can read the current state of an entity. Maybe it is possible by using a template to auto switch. Perhaps by using this card (and ask around there).

does anyone know how to get rid of that tsetConfig error? I have tried downgrading, but it randomly appears on my desktop fronted (Chrome), seems to work fine on mobile (Android)

Hi,

I use swipe-card with browser_mod, and it’s works fine with HA 112.4 and Browser _mod29. Atfer upgrade to HA 114.1 and browser_mod 1.1.6 the swipe-card is not working. Here is a simple example:

Browser:mod popup with swipe-card with 1 entity:

aspect_ratio: 5/2
color_type: card
entity: input_boolean.redony_vezerles
icon: 'mdi:format-line-weight'
show_name: false
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      cards:
        - entities:
            - cover.ablak_redonyok
          type: entities
      parameters:
        allowTouchMove: false
        centeredSlides: true
        navigation:
          keyboard:
            enabled: true
            onlyInViewport: true
        pagination:
          type: progressbar
        slidesPerView: auto
        spaceBetween: 8
      type: 'custom:swipe-card'
    deviceID:
      - this
      - dashboard
    large: false
    title: Covers
type: 'custom:button-card'

popup_with_swipe_card

Browser:mod popup without swipe-card with 1 entity:

aspect_ratio: 5/2
color_type: card
entity: input_boolean.redony_vezerles
icon: 'mdi:format-line-weight'
show_name: false
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      cards:
        - entities:
            - cover.ablak_redonyok
          type: entities
      type: vertical-stack
    deviceID:
      - this
      - dashboard
    large: false
    title: Covers
type: 'custom:button-card'

popup_without_swipe_card

Is that Browser_mod bug, or swipe-card? Or user? :slight_smile:

Thanks!

1 Like

Neither, it’s card mod and how browser mod works with that. Card mod and browser mod have been updated when HA 113 came out. It’s more powerfull, but you need to style the popup as well now. You can do this separately or through theme.yaml For more info read up on -> https://github.com/thomasloven/hass-browser_mod/issues/117

It has nothing to do with swipe card luckily, so you should be able to fix it using guides in that link.

1 Like

Thanks!

This resolved my problem.

1 Like