Skip to content

Card that allows you to swipe throught multiple cards for Home Assistant Lovelace

Notifications You must be signed in to change notification settings

bramkragten/swipe-card

Repository files navigation

Lovelace swipe card

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.

Installation:

You have 2 options, hosted or self hosted (manual). The first option needs internet and will update itself.

Hosted:

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: module

Manual:

Download 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: module

Configuration:

And add a card with type custom:swipe-card:

- type: custom:swipe-card
  cards: []

Parameters

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