Lovelace: Swiper card


#1

I created a card with swiper, that lets you flick through multiple cards.

You can use (almost?) all options of swiper, these can be found here.

A few config examples:

image

Full width cards with scrollbar:

      - type: custom:swipe-card
        parameters:
          spaceBetween: 8
          scrollbar:
            hide: false
            draggable: true
            snapOnRelease: true
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

image

Coverflow with pagination:

      - type: custom:swipe-card
        card_width: '185px'
        start_card: 2
        parameters:
          effect: 'coverflow'
          grabCursor: true
          centeredSlides: true
          slidesPerView: 'auto'
          coverflowEffect:
            rotate: 50
            stretch: 0
            depth: 100
            modifier: 1
            slideShadows : true
          pagination:
            type: 'bullets'
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

image

Navigation, keyboard and progressbar:

      - type: custom:swipe-card
        card_width: '80%'
        parameters:
          centeredSlides: true
          slidesPerView: 'auto'
          spaceBetween: 8
          pagination:
            type: 'progressbar'
          navigation:
          keyboard:
            enabled: true
            onlyInViewport: true
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

image

Default:

      - type: custom:swipe-card
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

Place swipe-card.js in /config/www/custom-lovelace/swipe-card/
Place swiper.min.js in /config/www/custom-lovelace/swipe-card/js/
Place swiper.min.css in /config/www/custom-lovelace/swipe-card/css/

  - url: /local/custom-lovelace/swipe-card/swipe-card.js?v=1.1.0
    type: module

Optional: add to custom_updater:

https://raw.githubusercontent.com/bramkragten/custom-ui/master/updater.json


#2

I can’t tell by the picture but does each ‘card’ snap into place if you >half slide it?


#3

Yes, it does. Also if you half slide the scrollbar.


#4

This is really cool, nice one! :+1:


#5

Nice space saver cheers


#6

That looks awesome! Very useful.


#7

You could also go all out with coverflow :sunglasses:


#8

This is damn hot! :+1:

EDIT:
@Bram_Kragten can’t get it working, log says:
TypeError: element.setConfig is not a function

tested with Chrome, Iron (Chromium) and Firefox :frowning:


#9

Got any example code for this?


#10

I get the same error (running on Safari)…

…/custom-lovelace/swipe-card/swipe-card.js?v=0.42:71:32 TypeError: element.setConfig is not a function. (In ‘element.setConfig(item)’, ‘element.setConfig’ is undefined)


#11

Yes, working on the final version, will be up tonight (CET) with all config options.

Same goes for the errors, try the new version tonight and see if it solves it.


#12

New version is on, please try :slight_smile:


#13

Really nice space saver, will try it out!


#14

Just tested with the latest version:

swipe-card.js?v=1.0:81 Uncaught TypeError: element.setConfig is not a function
    at _cards.config.cards.map (swipe-card.js?v=1.0:81)
    at Array.map (<anonymous>)
    at HTMLElement.set hass [as hass] (swipe-card.js?v=1.0:73)
    at config.cards.map.cardConfig (27194aefb40e6f5b8d5f.chunk.js:1371)
    at Array.map (<anonymous>)
    at HTMLElement._createCards (27194aefb40e6f5b8d5f.chunk.js:1371)
    at Object.runMethodEffect [as fn] (app-084b7564.js:1067)
    at runEffectsForProperty (app-084b7564.js:1067)
    at runEffects (app-084b7564.js:1067)
    at HTMLElement._propertiesChanged (app-084b7564.js:1067)

My config:

- type: custom:swipe-card              
  card_width: '185px'                  
  parameters:                          
    effect: 'coverflow'                
    grabCursor: true                   
    centeredSlides: true               
    slidesPerView: 'auto'              
    coverflowEffect:                   
      rotate: 50                       
      stretch: 0                       
      depth: 100                       
      modifier: 1                      
      slideShadows : true              
    pagination:                        
      type: 'bullets'                  
  cards:                               
    - type: sensor                     
      entity: sensor.serre_temperature 
      name: Temperatuur                
      line_width: 8                    
      line_color: '#FF6384'            
    - type: sensor                     
      entity: sensor.serre_humidity    
      name: Luchtvochtigheid           
      line_color: '#36A2EB'            
      line_width: 8                    

- url: /local/custom-lovelace/swipe-card/swipe-card.js?v=1.0
  type: js

#15

What version of home-assistant are you on? The sensor card you are using is only available in beta right now…


#16

Ah damn using version 0.79.2, wasn’t clear in the topic.


#17

The topic is about the slider, you can use it with any card.

You can use Lovelace: Mini graph card for now.


#18

I’m still getting this error:

.../custom-lovelace/swipe-card/swipe-card.js?v=1.0:81:32 TypeError: element.setConfig is not a function. (In 'element.setConfig(item)', 'element.setConfig' is undefined)

Safari, and HassOS v. 0.79.3


#19

Same here, using iPad app. Love the card though!


#20

What is your config? Are you also using the sensor card? You should swap that below ha version 0.80 for Lovelace: Mini graph card if you want to do the same.