Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
287

HI,

Using my first swiper setup, I can’t find the answer to a few questions, so turn to you:

I have a set of custom button cards with aspect ratio 1/1 and Id like the swiper to have a width of 1 button in a row of 4 buttons. However, Ive tried both 25% or eg 50px in the card-width field, but it still shows me a full width swiper.

Have now added it to a horizontal stack like this:

  - type: horizontal-stack
    cards:
      - !include /config/lovelace/includes/include_button_swiper_home_glance.yaml

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        color_type: blank-card

which works fine, but was wondering if this is the way to go.

Secondly, I’d like the swipe to simple continue to the first when it reaches the last button, while it now seems to quickly scroll back to the first button. Do I need a dedicated setting for that?

O, and lastly: is this card now deprecated? Seems the repo is locked, and no more development taking place? If so, is there a new alternative we should use?
thanks for having a look!

this is my current config:

parameters:
  effect: coverflow #flip
  slideShadows: true
  autoplay:
    delay: 3000
    disableOnInteraction: false
#      speed: 300
#          pagination:
#            type: 'bullets'
  scrollbar:
    hide: true
    draggable: true
    snapOnRelease: true
cards:
  - !include /config/lovelace/includes/include_button_sensor_home.yaml
  - !include /config/lovelace/includes/include_button_alarmclock.yaml
  - !include /config/lovelace/includes/include_button_trash_today.yaml
  - !include /config/lovelace/includes/include_button_espresso.yaml
  - !include /config/lovelace/includes/include_button_vijverpomp.yaml
  - !include /config/lovelace/includes/include_button_animated_weather.yaml
  - !include /config/lovelace/includes/include_button_wind_direction.yaml
  - !include /config/lovelace/includes/include_button_levering_verbruik.yaml

slider

288

This is the repo attached to HACS, i assume the one linked in the OP is legacy?

There appears to be an issue with 0.107.1 and using this card, raised as #9

@Bram_Kragten - can you please possibly have a look?

image

289

I have a slider-entity-row inside swipe-card and when I changes lights parameters via slider-entity-row tab of swipe-card moving too.
How can I fix it?
image

1 Like
290

i have the same issue like @Syrius in v3.0.0 ,after reload page several timres it load correctly,if i update to v3.1.0 ,all cards inside swipe-card are black,only can see the scrollbard.
someone else with this problem?

291

Move to master branch to fix this issue. @Bram_Kragten hasn’t create a new release yet

292

Love this slider!

Used it to create a little PlayStation 4 Game selector using picture-entity with call-service action.

games-slider
games-slider949×524 2.8 MB

Glad to see I am not the only with the t.setConfig error. Only happens on a refresh

1 Like
293

That looks great! Do you have to update the card every time you download a new game though, or will the card be updated automatically based on the source select of PS4 integration?

294

Thanks :slight_smile: Yeah, have to update the cards each time…although I don’t play/download many new games so not a major concern

295

Is this fixed yet?

296

In my setup, using master branch in HACS allows this card to load correctly.

297

I dont understand that about master branch, could you explain it? Thanks
you mean manually copying the js file?

298

My thoughts exactly.

I’m using the hosting method currently

299

The cards load but then on a refresh I get that error.

I’m using the hosting method for installation

300

@dankitchen @pollinolas

I Installed using HACS and then select master from the drop down list.

image
image750×1073 204 KB

Maybe it’s cached it if you installed from GH?

1 Like
301

Thanks for answer, I installed it like you said, deleted cache but same issue yet
in my case the problem is with picture-elements card, I have other views with entities that I have no problem
Thanks again bro

302

Live and learn live and learn, thanks :slight_smile:
Working now

303

Anyone using this with button card? I have tried it in the past but I have issues with touch being to sensitive. The cards work fine (have them setup in a horiontal-stack), but when swiping I have to start the swipe motion by dragging a button card. It then either registers it as a tap_action or hold_action (depends on how slow I drag). Is there a way I can fix this by using some parameters so it ignores the button card actions?

I have keyboard navigation turned on for now, but that isn’s as intuitive for tablet usage.

304

Just add:

allowTouchMove: false

to the card, and rely on the navigation buttons. This has cut down on accidental button presses for me, and allowed me to add sliding elements to the card.

1 Like
305

I think this card is great except for one thing. It is SO slow to load. Like 20 seconds at least. Which is annoying for me, and terrible for my SO. Does anyone know of any ways to speed up the cards load time?

306

20 seconds??? It is nowhere near that slow to me. It does take a few seconds (2-4 seconds usually, sometimes instant) on page reload when having multiple (conditional) cards.

Regarding your navigate solution: that doesn’t really work for me with my UI with button cards. I do use that for other cards though.