Lovelace: Swiper card

henson_kraj · April 1, 2024, 3:33am

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.

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.

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

Faecon · May 11, 2024, 6:05pm

swipe

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

it is on mobile

I tried

card_width: auto

Faecon · May 13, 2024, 3:08am

it looks like here is a solution…

github.com/bramkragten/swipe-card

Responsive Issue: Inconsistent card width on browser resize

opened 09:59AM - 09 Feb 24 UTC

przeniek

I've encountered an unusual behavior regarding the card width when resizing the …browser. During certain browser size adjustments, the card is being truncated by its container. I managed to resolve (i hope) this issue eventually by adding the following styling: ``` .swiper-container { width: 100% !important; } ``` Steps to Reproduce: Open the application in a web browser. Resize the browser to various sizes. Observe the behavior of the card within its container. Expected Behavior: The card should adjust its width appropriately, remaining fully visible within the container across different browser sizes. Actual Behavior: The card's width does not adjust properly, resulting in it being truncated by the container at certain browser sizes. Possible Fix: I recommend reviewing the CSS styling of the card, specifically considering the implementation of a width: 100% style for the .swiper-container to ensure better responsiveness. Additional Information: This issue was quite frustrating to deal with, and I believe addressing it could enhance the user experience. Please let me know if any further information or assistance is needed to resolve this.

but I don’t know where to put the

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

Mattia2399 · May 14, 2024, 12:35pm

Can anyone tell me why the paper is cut underneath?

Senza titolo

SuperNestendo · May 27, 2024, 2:12am

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:

Nettuno69 · June 10, 2024, 10:28am

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?

almighty59 · June 19, 2024, 7:00am

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

DirkS2106 · July 4, 2024, 6:22am

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

karma · July 14, 2024, 5:52pm

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;
          }

VietNgoc · July 14, 2024, 7:54pm

karma:

$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, 0, 0.1);
          --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
          --swiper-scrollbar-size: 4px;
        }
        div {
          height: 100%;
        }

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;

karma · July 14, 2024, 8:37pm

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:

VietNgoc · July 14, 2024, 8:40pm

simply add as additional variables to your theme.

github.com

ngocjohn/hass-config/blob/d94b5e0bc81bdc0503715c7333757b5e2da9b863/config/themes/tablet.yaml#L72-L90


      
          # Swiper
          swiper-pagination-bottom: 8px
          swiper-pagination-bullet-height: 8px
          swiper-pagination-bullet-horizontal-gap: 4px
          swiper-pagination-bullet-inactive-color: '#000'
          swiper-pagination-bullet-inactive-opacity: 0.2
          swiper-pagination-bullet-opacity: 1
          swiper-pagination-bullet-size: 8px
          swiper-pagination-bullet-vertical-gap: 6px
          swiper-pagination-bullet-width: 8px
          swiper-pagination-color: var(--swiper-theme-color)
          swiper-pagination-fraction-color: inherit
          swiper-pagination-left: auto
          swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25)
          swiper-pagination-progressbar-size: 4px
          swiper-pagination-right: 8px
          swiper-pagination-top: auto
          swiper-theme-color: rgb(179, 179, 179)
          tablet-popup-content-padding: 1.4em 2.2em 1.6em 1.5em

bkh · July 20, 2024, 6:17am

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

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.

Faecon · July 24, 2024, 8:54am

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:

Faecon · July 24, 2024, 8:56am

Can I make the start page depending on the user ?

bkh · July 26, 2024, 10:15am

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.

bkh · July 26, 2024, 10:19am

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?

bkh · August 21, 2024, 4:39am

How did you solve it?

neekulp · August 29, 2024, 11:52am

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