Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
845

I get a blank card as well.
Here is more options to look through.

846

loop boolean false Set to true to enable continuous loop mode

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be:

  • more than or equal to slidesPerView + slidesPerGroup
  • even to slidesPerGroup (or use loopAddBlankSlides parameter)
  • even to grid.rows (or use loopAddBlankSlides parameter)
    loopAddBlankSlides boolean true Automatically adds blank slides if you use Grid or slidesPerGroup and the total amount of slides is not even to slidesPerGroup or to grid.rows
    loopAdditionalSlides number 0 Allows to increase amount of looped slides
    loopPreventsSliding boolean true If enabled then slideNext/Prev will do nothing while slider is animating in loop mode
1 Like
847

can you try this code?
doesn’t work

type: custom:swipe-card
card_width: calc(100% - 48px)
parameters:
  centeredSlides: true
  slidesPerView: auto
  spaceBetween: 16
  initialSlide: 0
  rewind: false
  loop: true
  autoplay:
    delay: 4000
    disableOnInteraction: false
cards:
  - type: custom:button-card
    name: Slide 1
    icon: mdi:home
  - type: custom:button-card
    name: Slide 2
    icon: mdi:lightbulb
  - type: custom:button-card
    styles:
      card:
        - background: none
        - box-shadow: none
        - height: 0px
        - padding: 0
848

I can confirm loop: true does not work with autoplay: Seems to be a common issue.

The below code will get you a bit closer. Adjust the speed parameter to your liking. also experiment with cube and coverflow effects. Below slows down the speed of the rewind.

type: custom:swipe-card
parameters:
  effect: slide
  loop: false
  freeMode: false
  speed: 10000
  autoplay:
    delay: 1000
    disableOnInteraction: false
    reverseDirection: false
    stopOnLastSLide: false
  slidesPerView: auto
  slidesPerGroupAuto: true
  rewind: false
  spaceBetween: 16
  centeredSlides: true
cards:
  - type: custom:button-card
    name: Slide 1
    icon: mdi:home
  - type: custom:button-card
    name: Slide 2
    icon: mdi:lightbulb
  - type: custom:button-card
    name: Slide 3
    icon: mdi:lightbulb
  - type: custom:button-card
    name: Slide 4
    icon: mdi:lightbulb
1 Like
849

Did that work ok @groot29?

850

Yes but with rewind…

1 Like
851

Best I could do sorry, I think the card pulls directly from swiper, I am unsure if this behavior can be fixed?

1 Like
852

thanks anyway. You were very kind

1 Like
853

That is what this community is all about.

1 Like
854

Can someone tell me why my last 3 camera entities are smaller than the first 3?

image
image498×331 38.1 KB

This is my code:

type: custom:swipe-card
parameters:
  scrollbar:
    hide: true
  grabCursor: true
cards:
  - type: grid
    columns: 3
    square: false
    cards:
      - type: picture-glance
        title: Driveway
        show_name: false
        camera_image: camera.driveway_high_resolution_channel
        camera_view: auto
        fit_mode: cover
        entities: []
      - type: picture-glance
        title: Front Door
        show_name: false
        camera_image: camera.front_door_high_resolution_channel
        camera_view: auto
        fit_mode: cover
        entities: []
      - type: picture-glance
        title: Garden
        show_name: false
        camera_image: camera.back_garden_high_resolution_channel
        camera_view: auto
        fit_mode: cover
        entities: []
  - type: grid
    columns: 3
    square: false
    cards:
      - type: picture-glance
        title: Patio
        show_name: false
        camera_image: camera.patio_high_resolution_channel
        camera_view: auto
        fit_mode: cover
        entities: []
      - type: picture-glance
        title: Office
        show_name: false
        camera_image: camera.office_high_resolution_channel
        camera_view: auto
        fit_mode: cover
        entities: []
      - type: picture-glance
        title: Office Rear
        show_name: false
        camera_image: camera.office_rear_high_resolution_channel
        camera_view: auto
        fit_mode: cover
        entities: []
855

Has anyone been able to figure out how to change the navigation arrows to different icons?