Lovelace: Swiper card

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

did you manage to get this working @Myztillx?

I tried this, but I don’t get it working adding cards in a conditional card and then into a swiper card. Do you have any config/code example?

edit: got it working

1 Like

I was just about to post an example. Glad you got is working though!

1 Like

Maybe for the others when searching for a swiper conditional combination:
quick note: please be aware that cardoptions is a homekit-hacs plugin function so you should revert it back to normal card configuration

                      - card: custom:swipe-card
                        wider: true
                        higher: true
                        widerSize: 3
                        higherSize: 3
                        noPadding: true
                        cardOptions:
                          cards:
                            - type: conditional
                              conditions:
                                - entity: media_player.spotify_mart
                                  state: "playing"
                              card:
                                  type: "custom:mini-media-player"
                                  artwork: full-cover
                                  entity: media_player.spotify_mart
                                  style: |
                                      :host {
                                      }
                                      ha-card {
                                        height: 100%;
                                        background: none  !important;
                                        box-shadow: none !important;
                                        position: relative;
                                        font-size: 0.5vw !important;
                                        image
                                      }
                                      .button {
                                        padding: 0px !important;
                                        margin: 3px 2px !important;
                                      }
                                      ha-card{
                                      overflow: hidden !important;
                                      }
                                      :host #primaryProgress{
                                      background: #474A52 !important; 
                                      display: flex !important;
                                      height: 100%;
                                      }
                                  hide:
                                    power: true
                                    progress: false
                                    runtime: true
                                    icon: true
                                    name: true
                                    source: true
                                    volume: true
                                    controls: false
                            - type: conditional
                              conditions:
                                - entity: media_player.spotify_lussie33
                                  state: "playing"
                              card:
                                  type: "custom:mini-media-player"
                                  artwork: full-cover
                                  entity: media_player.spotify_lussie33
                                  style: |
                                      :host {
                                      }
                                      ha-card {
                                        height: 100%;
                                        background: none  !important;
                                        box-shadow: none !important;
                                        position: relative;
                                        font-size: 0.5vw !important;
                                        image
                                      }
                                      .button {
                                        padding: 0px !important;
                                        margin: 3px 2px !important;
                                      }
                                      ha-card{
                                      overflow: hidden !important;
                                      }
                                      :host #primaryProgress{
                                      background: #474A52 !important; 
                                      display: flex !important;
                                      height: 100%;
                                      }
                                  hide:
                                    power: true
                                    progress: false
                                    runtime: true
                                    icon: true
                                    name: true
                                    source: true
                                    volume: true
                                    controls: false
3 Likes

Has anyone managed to get loop working?

I want to have (currently 2 maps but there will probably be more) and instead of swiping the correct way I want to be able to loop around all maps.

This is what I have currently which does not work

type: 'custom:swipe-card'
parameters:
  loop: true
  loopAdditionalSlides: 2
  loopedSlides: 2
  centeredSlides: true
  slidesPerView: auto
  spaceBetween: 8
  pagination:
    type: progressbar
  navigation: null
  keyboard:
    enabled: true
    onlyInViewport: true
cards:
  - type: map
    entities:
      - person.petra
      - person.andreash
      - device_tracker.kraftan
  - type: map
    entities:
      - person.petra
      - device_tracker.kraftan

When you read the documentation about loops https://swiperjs.com/api/ (CTRL + F “Loop” match 9/38 ) it’s not clear to me at least what I have done wrong.

I get two cards and I can swipe between them but when I loop I get to a blank card and if I keep swiping I go back to the card I came from.

1 Like

Did you find out @Kejszijo? I would like to know also.

1 Like

Hi,

From one of the versions the problem was solved by itself.

It looks to follow the color of the theme.

Hey, I’m trying to resize the bullets since i have them “clickable” and on my touchscreen (raspberry pi os) i can’t swipe (it bugs) and clicking works.
But the bullets are too small to click.
Do you have any idea how to css them and where?
This is what I have but it has no effect @Bram_Kragten

                        style: |
                            .swiper-pagination-bullet {
                              width: 20px;
                              height: 20px;
                            }

the only way I found to edit swipe card style was to use the custom:mod-card type on top of the swipe card

type: custom:mod-card
style: 
  swipe-card:
    $: |
      .swiper-scrollbar-drag {            
        background-color: rgba(255,79,211,0.6) !important;        
      }
card:
    type: custom:swipe-card
    cards:
3 Likes

Hey all, I am using this with a raspberry pi and a touchscreen, chromium. And I experience that swipe just won’t work. It won’t fully swipe as it should and it’s laggy. Did others experience this issue, and found a solution for this?