A Lovelace card that uses swiper to create a touch slider that lets you flick through multiple cards. You can use (almost?) all options of swiper, these can be found here.
You have 2 options, hosted or self hosted (manual). The first option needs internet and will update itself.
Add the following to resources in your lovelace config:
resources:
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/swipe-card/swipe-card.min.js
type: module
- Download the swipe-card.js to
/config/www/custom-lovelace/swipe-card/
. (or an other folder in/config/www/
) - Download the swiper.min.js to
/config/www/custom-lovelace/swipe-card/js
. (or in a subfolderjs
in the folder choosen above) - Download the swiper.min.css to
/config/www/custom-lovelace/swipe-card/css
. (or in a subfoldercss
in the folder choosen above)
Add the following to resources in your lovelace config:
resources:
- url: /local/custom-lovelace/swipe-card/swipe-card.js
type: module
And add a card with type custom:swipe-card
:
- type: custom:swipe-card
cards: []
- type: custom:swipe-card
path: '/local/custom-lovelace/swipe-card'
cards: []