Lovelace: Swiper card

Here’s my bug… it’s been happening since I tried this card. The Scrollbar or balls will always go outside the card. Sometimes after 10 minutes, sometimes after 20.
image
this is how i want it… and then it will move to this and mess up all alignment. not to mention i can’t change the color of the balls.
image

type: custom:swipe-card
parameters:
  slidesPerView: 1
  spaceBetween: 0
  start_card: 1
  grabCursor: true
  followFinger: true
  pagination:
    type: bullets
    hide: false
    draggable: true
    snapOnRelease: true
cards:
  - type: picture-entity
    show_state: false
    show_name: false
    camera_view: live
    entity: camera.front_door_medium
  - type: picture-entity
    show_state: false
    show_name: false
    camera_view: live
    entity: camera.back_alley_east_medium
  - type: picture-entity
    show_state: false
    show_name: false
    camera_view: live
    entity: camera.back_alley_west_medium
    theme: Mushroom Square
  - type: picture-entity
    show_state: false
    show_name: false
    camera_view: live
    entity: camera.side_enterance_medium
1 Like

swipe

at the right the card is not fully shown, how to fix it ?

it is on mobile

I tried

card_width: auto

it looks like here is a solution…

but I don’t know where to put the

.swiper-container {
    width: 100% !important;
}

Can anyone tell me why the paper is cut underneath?

Senza titolo

Can anyone advise what I am doing wrong with this calendar? I have a custom Week Planer card installed and am trying to use it to swipe between calendars.
Even using the native Google Calendar integration I am unable to add Calendars to this swipe card properly, they display no data and can’t be swiped between.

Current code for card looks like this:

type: custom:swipe-card
cards:
  - type: custom:week-planner-card
    entities:
      - entity: calendar.baby_events
      - entity: calendar.bryannie_appointments

Current error I get:

image

WhatsAppVideo2024-06-10at12.24.20-ezgif.com-video-to-gif-converter

Hi, I created an excellent solution with “start_card” but I don’t know how to create a command to go to card 3 when the Video Intercom sensor detects movement, how can I do it?

Any luck on this? For me it seems to work when it wants to. Sometimes it does and sometimes it doesn’t.

Moin, is it possible to change the color of the text for the non active bullets?

like this?

#################################################
#                                               #
#               SWIPE CARD MARGIN               #
#                                               #
#################################################

    $swipe-card$:
      .: |
        div {
          height: 100%;
        }
        {
          --swiper-scrollbar-border-radius: 10px;
          --swiper-scrollbar-top: auto;
          --swiper-scrollbar-bottom: 4px;
          --swiper-scrollbar-left: auto;
          --swiper-scrollbar-right: 4px;
          --swiper-scrollbar-sides-offset: 1%;
          --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
          --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
          --swiper-scrollbar-size: 4px;
        }
        .swiper-container {
          margin: -1.5vw !important;
          padding: 1.5vw !important;
        }
      hui-horizontal-stack-card$:
        .: |
          hui-conditional-card {
            margin: 0 0.15vh 0 0 !important;
          }

Or set it directly in the theme.

tablet: 
      --swiper-scrollbar-border-radius: 10px;
      --swiper-scrollbar-top: auto;
      --swiper-scrollbar-bottom: 4px;
      --swiper-scrollbar-left: auto;
      --swiper-scrollbar-right: 4px;
      --swiper-scrollbar-sides-offset: 1%;
      --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
      --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
      --swiper-scrollbar-size: 4px;

I’m not getting. It’s not working on mine, I must be doing something wrong…

I wanted to change the color of the bar but I can’t…

          - type: custom:mod-card
            card_mod:
              style:
                $swipe-card$:
                      .: |
                        :host {
                          --swiper-scrollbar-border-radius: 10px;
                          --swiper-scrollbar-top: auto;
                          --swiper-scrollbar-bottom: 4px;
                          --swiper-scrollbar-left: auto;
                          --swiper-scrollbar-right: 4px;
                          --swiper-scrollbar-sides-offset: 1%;
                          --swiper-scrollbar-bg-color: rgba(0, 0, 255, 0.3);
                          --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
                          --swiper-scrollbar-size: 4px;
                        }
            card:
              type: custom:swipe-card
              start_card: 1
              parameters:

simply add as additional variables to your theme.

1 Like

Is it possible to swipe images with entities on them? Ie: Can I create a PNG of my living room, and then add icons for lights on to the png to turn them on and off, and then swipe that room to go to another room, and the same kind of thing for each room?

I have read through this entire thread, and a few others, and I’m surprised that nobody seems to be asking this question. Note: I am doing this on a Picture Elements card as it is for my custom dashboard.

At the very bottom, where all the rooms are, I want to simplify the page and just show one room at a time, and swipe between them. To do that, I’ll just create a room similar to the Hallway shot here, and add the icons like I currently have them at the bottom of the main dashboard. But when I try to add code like this to my picture-elements dashboard card:

  - type: custom:swipe-card
    style:
      left: 50.75%
      top: 96.5%
      width: 40%
    parameters:
      effect: cover
      grabCursor: true
      centeredSlides: false
      slidesPerView: auto
      pagination: null
      type: bullets
    cards:
      - type: image
        image: /local/lovelace/overlays/Round Menu/3/Hallway Box.png

it says that “image” card can’t be found. So I don’t know what card I can use to display the background image of the “Hallway” box, and then be able to add the entity icons on top of it?

Does anyone have any suggestions? I don’t usually have much luck asking questions on here so by the time anyone reads this and possibly responds, I may have already figured it out, but I’ve been searching now for a while and I’m definitely missing something so I’ll keep my fingers crossed that someone with some knowledge has a moment to spare for me :slight_smile:

Thank you in advance!

Screenshot 2024-07-22 063143

EDIT: Figured this out. When I was using Picture Elements, I was forgetting to add the line “elements” below type: picture-elements. Now I have an issue where all of my entities on my second slide won’t click. They work on the first, third and all other slides, and even when I delete the second slide and create a new one, or let the third slide move into the second slide’s position, the second slide still won’t click. I don’t get it. Makes no sense.

How can I make my swiper card a little smaller ? I tried this but that is not working…

  - type: custom:swipe-card
    style:
      width: 95%
    cards:
      - square: false
        type: grid
        columns: 1
        cards:

Can I make the start page depending on the user ?

you can use

style:
transform: scale(.95,.95)

if it moves things around on the card, you might need to use translate as well,

style:
transform: scale(.95,.95) translate(-.5,-.5) etc… I’ve never figured out how exactly the translate thing works, but I input different numbers and it seems to fix any issues that might arise when using transform: scale.

1 Like

I have an interesting issue where all of my entities only on my second slide won’t click. They work on the first, third and all other slides/cards, and even when I delete the second slide and create a new one, or delete it and let the third slide become the second slide , the second slide still won’t click. I don’t have any specific settings that are on this slide, they are all picture-elements cards though.

I don’t get it. Has anyone else encountered this?

How did you solve it?

So had a strange thing happen after a HA update (2024.8.3)
The cards if more than 3, don’t have any coverflow working. I have attached images showing what I mean.

Any idea what the issue could be?

YAML below

type: custom:swipe-card
card_width: 200px
start_card: 2
reset_after: 3
parameters:
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  effect: coverflow
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: null
  scrollbar:
    hide: true 
    draggable: false
    snapOnRelease: true


@bkh sorry for the late response. After setting it like DevoliaEsp here Lovelace: Swiper card - #749 by DevoliaEsp and a complete reboot, it worked for a time. But in the meanwhile i don‘t use it anymore. There are some bugs on mobile phones (Touchscreens).

1 Like