Lovelace: Slideshow Card

Slideshow Card

Slideshow Card for Home Assistant’s UI LoveLace

Configuration Variables

Name Type Default Description
type string Required custom:slideshow-card
cards list Required/Optional List of cards Reqires 2 or more cards Only Optional if folder=true
style list Optional List of Style attributes
arrow_color string Optional Color of the Navigational Arrows, Default: Black
arrow_opacity string Optional Opacity of the Navigational Arrows, Default: 1
flush boolean Optional Makes the inner Cards flush with the Slideshow Card, Default: false
auto_play boolean Optional Option to turn on/off auto switching of the cards, Default: false
auto_delay string Optional Seconds between switching to next card when autoplay=true, Default: 5
folder entity Optional This is for dynamically pulling images from a folder See Dynamic Slideshow

Added Child Card Variables

Name Type Default Description
style list Optional List of Style Attributes per Card - This allows for styling of Child Cards

Dynamic Slideshow

This allows you add images to a folder in your WWW folder that contains images you would like the see in the slideshow. Currently, this requires over writing the Folder Sensor so that the client can see the files. I am working on a built in method but wanted to get this feature available.

You will need to create a folder in your config directory named custom_components, within the custom_components folder you will need to create a sensor folder, and within that folder copy the folder.py file.

  1. Create a folder in your config directory named custom_components
  2. Create a folder in your custom_components named sensor
  3. Copy the folder.py into the sensor folder
  4. Add the folder sensor to your configuration.yaml file
     - sensor
        - platform: folder_test
          folder: /config/www/images
    
  5. Create a folder in your WWW folder named images
  6. Add your images to this folder
  7. Restart Home Assistant
  8. Check the sensor.images entity to see if the fileList attribute lists your image files
  9. Add a card to your ui-lovelace.yaml
    - type: custom:slideshow-card
      folder: sensor.images
    
    • The other configuration variables are still available to use
  10. Refresh your Lovelace Frontend

Any files you add to the folder should automatically get added to the slide show

Installation

  1. Copy slideshow-card.js to <config directory>/www/slideshow-card.js
  2. Add slideshow-card as a resource in ui-lovelace.yaml
resources:
  - url: /local/slideshow-card.js
    type: js

Example Configuration

Showing Flush Feature along with Auto Play and Styling the Outer Card

- type: custom:slideshow-card
  flush: true
  arrow_color: White
  arrow_opacity: .5
  auto_play: true
  auto_delay: 4
  style:
    'border-radius': '25px'
  cards:
    - type: picture
      image: /local/images/1.jpg
    - type: picture
      image: /local/images/2.jpg
    - type: picture
      image: /local/images/3.jpg

Showing Arrow Color/Opacity Features and working with functional cards

- type: custom:slideshow-card
  arrow_color: var(--primary-text-color)
  arrow_opacity: .7
  cards:
    - type: glance
      column_width: 30%
      entities:
        - entity: device_tracker.person1
          name: Person 1
        - entity: device_tracker.person2
          name: Person 2
        - entity: sensor.house_alarm_sensor
        - entity: sensor.to_work
          icon: mdi:car
          name: To Work
        - entity: sensor.to_store
          icon: mdi:car
          name: To Store
    - type: glance
      column_width: 30%
      entities:
        - entity: light.light_1
          name: Light 1
          tap_action: toggle
        - entity: light.light_2
          name: Light 2
          tap_action: toggle
        - entity: light.light_3
          name: Light 3
          tap_action: toggle
        - light.office_1
        - light.office_2
    - type: glance
      column_width: 30%
      entities:
        - light.bedroom_1
        - light.bedroom_2
        - light.bedroom_3
        - light.bedroom_lamp_2

Example 2

Showing Styling of the Inner Cards

- type: custom:slideshow-card
  arrow_color: var(--primary-text-color)
  arrow_opacity: .5
  cards:
    - type: picture
      image: /local/images/1.jpg
      style:
        'border-radius': '25px'
    - type: picture
      image: /local/images/2.jpg
    - type: picture
      image: /local/images/3.jpg
      style:
        'border-radius': '10px'

Let me know if you have any questions, issues or suggestions!

EDIT: Added Dynamic Slideshow options

12 Likes

Nice card!! You can save a lot of space, specially for mobile views. Thanks!! I will try it !

1 Like

This is a nice card for screens with limited space well done will try it out.

2 Likes

Great idea and nice execution, will be using this for sure, thanks!

Can this be modified to show pictures in a folder? I am thinking it will be a great addition to show the last recorded pictures from a camera.

I will look into it. Thank you fo the suggestion!

Funny - when I saw the title of this thread, that was my first assumption of what this card would do. I was thinking about this just the other day - if I had enough space on my main dashboard, I wouldn’t mind a slideshow of family pictures running in a card.

1 Like

Added Dynamic Slideshow Option. It pulls files from a folder. Little Hacky currently

Added Dynamic Slideshow Option. It pulls files from a folder. Little Hacky currently. Sorry

1 Like

Great card. Thanks. Any chance of adding a title?

1 Like

Hi, I’m using your slideshow card for IP camera monitoring which rotates through live camera streams (picture-glance cards).

Works great!!

Would it be possible to have the slideshow skip a stream if an associated sensor is off?
For example, if one the camera stream is offline, slideshow skip to the next and not displaying blank for x seconds?

I tried to use conditional card with each picture-glance for the streams but still display a blank card for x seconds.

Just discovered this now! This is awesome!!

I have a few suggestions

  1. Ability to add a title to the card. I’m building some dynamic cards when I’m in a certain room but it would be nice to have the title of the room.
  2. Ability to change the size of the arrows
  3. Automate the slideshow except if the user is interacting with a card then delay the cycle for a few seconds.
  4. Finally add to the custom updater

Thanks!

Hi,

Thanks for a nice card. I got a problem and can’t figure it out really.
I want to display three gauge cards in the slideshow.

This is my yaml code:

  - type: custom:slideshow-card
    arrow_color: var(--primary-text-color)
    arrow_opacity: .7
    cards:
      - type: gauge
        title: Övervåning
        entity: sensor.fibaro_system_unknown_type0c02_id1003_temperature
        min: -50
        max: 50
      - type: gauge
        title: Entrén
        entity: sensor.fibaro_system_unknown_type0c02_id1003_temperature_2
        min: -50
        max: 50
      - type: gauge
        title: Källaren
        entity: sensor.philio_technology_corporation_phpat02beu_multisensor_2in1_temperature
        min: -50
        max: 50

I see the first gauge, but the second is not visible.

Screenshots

1gauge

2gauge

Can someone see the issue in my yaml?

An unrelated feature request: have dynamic slideshow (optionally?) navigate sub-directories

Is it possible somehow to dislay also the name of the file showing in the card?

Since a few month this card isn’t working anymore… I always get the following error shown in lovelace:

element.setConfig is not a function
type: 'custom:slideshow-card'
fill: true
arrow_color: White
arrow_opacity: 0.5
auto_play: true
auto_delay: 4
style:
  border-radius: 25px
cards:
  - type: picture-entity
    entity: camera.eingang_innen
    name: Eingang Innen
    show_state: false
    camera_image: camera.eingang_innen
  - type: picture-entity
    name: Eingang Aussen
    show_state: false
    entity: camera.eingang_aussen
    camera_image: camera.eingang_aussen

Anyone else having the same problem? It was working great for months without any problems. I know the card isn’t updated anymore and archived on github… Any chance to get it working again? Or is it working with the latest versions for someone else? Or are the camera pictures not supported anymore?

I am using 0.107.7 but have this problem since a few updates now…

It seems that this was broken by the migration to /hacsfiles/ for front-end plugins. I removed the entry for slideshow-card from Configuration > Lovelace Dashboards > Resources and then re-added it with the following parameters:

  • URL: /hacsfiles/slideshow-card/slideshow-card.js
  • Resource Type: `JavaScript Module

It’s all working again for me now. :+1:

Looks like the original author has decided to not support this any more, but there are two forks which have been updated in the past couple months for newer HA versions:


Note: In case someone has same problem as I did. Be aware of styling child card with card-mod. I just copy-paste picture-element card I was using with card-mod styling and it was rendering cards vertically without arrows. Once I removed card-mod styling it was all good. -> using igloo15 version.

I’m using the igloo15 fork of this and I can get it to work if I specify the images, but if I try to use a folder I get an error:

config.cards is undefined

type: ‘custom:slideshow-card’
folder: sensor.images

Here’s the raw configuration on the dashboard:

    cards:
      - type: 'custom:slideshow-card'
        arrow_color: White
        arrow_opacity: 0.5
        auto_delay: 4
        auto_play: true
        cards:
          - image: /local/images/1.jpg
            type: picture
          - image: /local/images/2.jpg
            type: picture
          - image: /local/images/3.jpg
            type: picture
        fill: true
        style:
          border-radius: 25px
      - type: 'custom:slideshow-card'
        folder: sensor.images

Here’s what is in sensor.images:
path

/config/www/images/

filter

number of files

3

bytes

5949697

file list

/config/www/images/1.jpg, /config/www/images/2.jpg, /config/www/images/3.jpg

Anyone have any ideas?