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