Swipe card : to swipe or not to swipe

Configuration Frontend
1

Hello,

The swipe-card is fantastic, but…

As user you don’t see if it is a swipe card or not. Second problem, if it is a swipe card how mush time can I swipe ?

Has someone found a nice solution for this ?

Currently I have placed 2 arrows at the bottom to indicate that it is a swipe card. I would have liked to have put the left arrow in gray when the first swipe card is shown (and the right arrow in gray when the last swipe card is shown), but don’t know how…

image

Thanks !

2

If you are referring to the custom:swipe-card, then add the:

parameters:
  pagination:
    type: bullets
    clickable: true
  scrollbar:
    draggable: true

which will show both the number of slides as bullets underneath the slides, as well as a scrollbar.

3

Yes, thank you !

One problem in some cases : the scrollbar comes at the bottom, taking into account the largest card. Is it possible to make the scrollbar appear at the top ?

image
image273×754 10.3 KB

4

The Lovelace plugin only embeds the original latest version of Swiper API with minimal CSS. Everything configurable is in the swiperjs documentation.

If you want to customize the location then you would need to find a way to insert custom css, like:

.swiper-scrollbar{
  top: 0
}
5

OK, thanks.

Meanwhile the several cards are almost the same high, so that’s fine :upside_down_face: