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.js
type: moduleDownload the swipe-card.js to /config/www/custom-lovelace/swipe-card/. (or an other folder in /config/www/)
Add the following to resources in your lovelace config:
resources:
- url: /local/custom-lovelace/swipe-card/swipe-card.js
type: moduleAnd add a card with type custom:swipe-card:
- type: custom:swipe-card
cards: []| Name | Type | Default | Supported options | Description |
|---|---|---|---|---|
card_width |
string | Any css option that fits in the width css value |
Will force the width of the swiper container | |
start_card |
number | Any number | The card being displayed at the beginning | |
parameters |
object | Any parameter from here | Configuration of the swiper | |
reset_after |
number | Any number | Will reset the swiper to the start_card if defined or the first card after reset_after seconds |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent