Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
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.

1 Like
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.

21

Thank you for creating the card.

Is there a way to set a start position for the swiper?
I have 3 cards (mini graph card) in the swiper and would like to have te second card as start position.

22

I added start_card:

      - type: custom:swipe-card
        start_card: 2
        parameters:
          ...
        cards:
          - ...
1 Like
23

Thanks!

Works perfect !

24

Would it be possible to use it in combination with button-card?

25

I guess, have you tried?

26

Yes I tries and is not working.

My goal is to have a card with multiple scene to swipe (the scene are light scenes: bright, dimmed, colored and so on).

Now I have a button-card for each scene (for each set of light) , but would save lots of space swiping (one card for each set of light and swiping for changing scene)

27

Seems to work fine? Or is this not what you mean?

https://github.com/bramkragten/custom-ui/blob/master/swipe-card/preview-button.gif?raw=true

1 Like
28

Oh now I see my mistake. Would it be possible to swipe each button?

29

1 button per slide? yeah sure…
https://github.com/bramkragten/custom-ui/blob/master/swipe-card/preview-%20button-single.gif?raw=true

30

Sorry for not being clear, I mean just each button

31

I don’t understand?