Lovelace: Swiper card

Appreciate the reply. Newbie to HA and just want your guys opinion on the best way to create what I’m after. The buttons have been created using mushroom:template-card

Here’s the code for the buttons:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    view_layout:
      grid-area: kitchen
    primary: Kitchen
    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
    icon: mdi:silverware-fork-knife
    icon_color: |-
      white
      {% if is_state('light.your_light', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(0, 0, 0, 0.2);
          color: var(--primary-color);
        }
  - type: custom:mushroom-template-card
    view_layout:
      grid-area: utility
    primary: Utility
    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
    icon: mdi:washing-machine
    icon_color: |-
      white
      {% if is_state('light.your_light', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: utility
    hold_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(0, 0, 0, 0.2);
          color: var(--primary-color);
        }

Here’s the code with the swipe slider:

type: custom:swipe-card
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(0, 0, 0, 0.2);
      color: var(--primary-color);
    }
cards:
  - type: custom:mushroom-template-card
    primary: Living Room
    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
    icon: mdi:sofa
    icon_color: |-
      white
      {% if is_state('light.your_light', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: livingroom
    hold_action:
      action: toggle
    badge_color: white
  - type: custom:mushroom-template-card
    primary: Snug
    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: office
    hold_action:
      action: toggle
    icon_color: |-
      white
      {% if is_state('light.your_light', 'on') %}
        teal
      {% endif %}

When trying to use this layout with the swipe card it puts each button into one slider, so I end up with 6 slides, whereby I’d like the 6 buttons on one slider.

If I understand you correctly, you want to have a slider-card where you can slide between the entire blocks right? So first slide shows the buttons of Downstairs, second slide shows all buttons of Upstairs and third slide shows all buttons of Outside.

Please post the entire code of the screenshot, not just a part of the button. I need to see how you create the entire example, so I can see how you can use swiper-card to achieve what you want and edit your code.

Hey @ASNNetworks - really appreciate the help on this. I’ve only been using HA for a week so trying to get my head around all of this. If you need anything else, just shout.

  - theme: neon
    title: buttons
    path: buttons
    type: custom:vertical-layout
    badges: []
    cards:
      - *ref_0
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: livingroom
            primary: Living Room
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
            icon: mdi:sofa
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: livingroom
            hold_action:
              action: toggle
            badge_color: ''
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: snug
            primary: Snug
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
            icon: mdi:sofa
            tap_action:
              action: navigate
              navigation_path: office
            hold_action:
              action: toggle
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                teal
              {% endif %}
            layout: horizontal
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0, 0, 0, 0.1);
              color: var(--primary-color);
            }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: kitchen
            primary: Kitchen
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
            icon: mdi:silverware-fork-knife
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: kitchen
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: utility
            primary: Utility
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
            icon: mdi:washing-machine
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: utility
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: diningroom
            primary: Dining Room
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
            icon: mdi:seat
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: diningroom
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: hallway
            primary: Hallway
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
            icon: mdi:stairs
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: hallway
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0, 0, 0, 0.1);
              color: var(--primary-color);
            }
      - type: custom:mushroom-title-card
        view_layout:
          grid-area: titleupstairs
        title: Upstairs
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: hugoroom
            primary: Hugo's Room
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
            icon: mdi:bed-double
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: hugoroom
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: masterroom
            primary: Master Room
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
            icon: mdi:bed-king
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: masterroom
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: spareroom
            primary: Spare Room
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
            icon: mdi:bed-double
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: spareroom
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: dressingroom
            primary: Dressing Room
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
            icon: mdi:tshirt-v
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: dressingroom
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: bathroom
            primary: Bathroom
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
            icon: mdi:bathtub
            tap_action:
              action: navigate
              navigation_path: bathroom
            hold_action:
              action: toggle
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            view_layout:
              grid-area: ensuiteroom
            primary: En-Suite
            secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
            icon: mdi:shower-head
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: ensuite
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
      - type: custom:mushroom-title-card
        view_layout:
          grid-area: titleoutside
        title: Outside
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Garden
            secondary: ''
            icon: mdi:palm-tree
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: garden
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }
          - type: custom:mushroom-template-card
            primary: Garage
            secondary: ''
            icon: mdi:garage
            icon_color: |-
              white
              {% if is_state('light.your_light', 'on') %}
                orange
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: garage
            hold_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0, 0, 0, 0.2);
                  color: var(--primary-color);
                }

Thanks and don’t worry about it, it’s not expected that you have all the know-how within a week, that’s why we have this amazing community forum :slight_smile:

One thing to note: you use card_mod with your horizontal-stack cards. This doesn’t do anything, since card-mod only works with cards that contain a ha-card element. This is also explained in the docus of card_mod:

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.

Note, though that those cards often include other cards, which card-mod can work on.
See the manual for each card to see how to specify parameters for the included card(s).
GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

Using card_mod styling for cards without ha-card element is done differently (and a little hacky). This is also explained at the bottom of the docs page: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card. So if you really want to use it, follow that explanation, or leave it out entirely since it doesn’t do anything right now. I have deleted it to clean up the code.

I have removed the horizontal-stack entirely and replaced it with grid card and used columns: 2 as variable. See here for more info about this card (it’s a core HA card): Grid Card - Home Assistant (home-assistant.io)

This automatically creates a grid with 2 cards side by side and then the next 2 under it and so on. So instead of using 3 horizontal-stacks you can just use one grid card. Changing the column variable, changes how many cards are next to each other, before going to the the column under it. So this allows you to change it flexibel to different layouts if you desire, without changing all your code.

So what I basically did is create one swiper card. And in there I created three vertical-stack cards. Each vertical stack consists of a title card and a grid card. So this should give you three slides, with each a block that slides entirely consisting of a title and a grid of buttons.

I can’t test it myself since I don’t use mushroom-cards. Let me know if it works or not.

  - theme: neon
    title: buttons
    path: buttons
    type: custom:vertical-layout
    badges: []
    cards:
      - type: 'custom:swipe-card' 
        parameters: 
          spaceBetween: 20 
          pagination:
            type: bullets
            watchOverflow: true
        cards:
          - type: vertical-stack
            cards:
              - *ref_0
              - type: grid
                columns: 2
                square: false
                cards:
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: livingroom
                    primary: Living Room
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                    icon: mdi:sofa
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: livingroom
                    hold_action:
                      action: toggle
                    badge_color: ''
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: snug
                    primary: Snug
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                    icon: mdi:sofa
                    tap_action:
                      action: navigate
                      navigation_path: office
                    hold_action:
                      action: toggle
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        teal
                      {% endif %}
                    layout: horizontal
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: kitchen
                    primary: Kitchen
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                    icon: mdi:silverware-fork-knife
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: kitchen
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: utility
                    primary: Utility
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                    icon: mdi:washing-machine
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: utility
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: diningroom
                    primary: Dining Room
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                    icon: mdi:seat
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: diningroom
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: hallway
                    primary: Hallway
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                    icon: mdi:stairs
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: hallway
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
          - type: vertical-stack
            cards:            
              - type: custom:mushroom-title-card
                view_layout:
                  grid-area: titleupstairs
                title: Upstairs
              - type: grid
                columns: 2
                square: false
                cards:
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: hugoroom
                    primary: Hugo's Room
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                    icon: mdi:bed-double
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: hugoroom
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: masterroom
                    primary: Master Room
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                    icon: mdi:bed-king
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: masterroom
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: spareroom
                    primary: Spare Room
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                    icon: mdi:bed-double
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: spareroom
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: dressingroom
                    primary: Dressing Room
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                    icon: mdi:tshirt-v
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: dressingroom
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: bathroom
                    primary: Bathroom
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                    icon: mdi:bathtub
                    tap_action:
                      action: navigate
                      navigation_path: bathroom
                    hold_action:
                      action: toggle
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    view_layout:
                      grid-area: ensuiteroom
                    primary: En-Suite
                    secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                    icon: mdi:shower-head
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: ensuite
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
          - type: vertical-stack
            cards:  
              - type: custom:mushroom-title-card
                view_layout:
                  grid-area: titleoutside
                title: Outside
              - type: grid
                columns: 2
                square: false
                cards:
                  - type: custom:mushroom-template-card
                    primary: Garden
                    secondary: ''
                    icon: mdi:palm-tree
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: garden
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }
                  - type: custom:mushroom-template-card
                    primary: Garage
                    secondary: ''
                    icon: mdi:garage
                    icon_color: |-
                      white
                      {% if is_state('light.your_light', 'on') %}
                        orange
                      {% endif %}
                    tap_action:
                      action: navigate
                      navigation_path: garage
                    hold_action:
                      action: toggle
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(0, 0, 0, 0.2);
                          color: var(--primary-color);
                        }

P.S. alternatively you can also delete the custom:mushroom-template-card you use for the titles. You can also set a title with grid card. This would also make the vertical-stack inside each slide redundant, since I only had to add that to make sure each title and grid were stack together.

This would make the code even smaller. But not sure if you like the way the titles look that grid card uses.

  - theme: neon
    title: buttons
    path: buttons
    type: custom:vertical-layout
    badges: []
    cards:
      - type: 'custom:swipe-card' 
        parameters: 
          spaceBetween: 20 
          pagination:
            type: bullets
            watchOverflow: true
        cards:

          - type: grid
            columns: 2
            square: false
            title: Downstairs
            cards:
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: livingroom
                primary: Living Room
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                icon: mdi:sofa
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: livingroom
                hold_action:
                  action: toggle
                badge_color: ''
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: snug
                primary: Snug
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                icon: mdi:sofa
                tap_action:
                  action: navigate
                  navigation_path: office
                hold_action:
                  action: toggle
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    teal
                  {% endif %}
                layout: horizontal
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: kitchen
                primary: Kitchen
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                icon: mdi:silverware-fork-knife
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: kitchen
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: utility
                primary: Utility
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                icon: mdi:washing-machine
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: utility
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: diningroom
                primary: Dining Room
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                icon: mdi:seat
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: diningroom
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: hallway
                primary: Hallway
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                icon: mdi:stairs
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: hallway
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }

          - type: grid
            columns: 2
            square: false
            title: Upstairs
            cards:
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: hugoroom
                primary: Hugo's Room
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                icon: mdi:bed-double
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: hugoroom
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: masterroom
                primary: Master Room
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                icon: mdi:bed-king
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: masterroom
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: spareroom
                primary: Spare Room
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                icon: mdi:bed-double
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: spareroom
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: dressingroom
                primary: Dressing Room
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c'
                icon: mdi:tshirt-v
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: dressingroom
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: bathroom
                primary: Bathroom
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                icon: mdi:bathtub
                tap_action:
                  action: navigate
                  navigation_path: bathroom
                hold_action:
                  action: toggle
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                view_layout:
                  grid-area: ensuiteroom
                primary: En-Suite
                secondary: '{{ states(''sensor.your_temperature_sensor'') }}°c '
                icon: mdi:shower-head
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: ensuite
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }

          - type: grid
            columns: 2
            square: false
            title: Outside
            cards:
              - type: custom:mushroom-template-card
                primary: Garden
                secondary: ''
                icon: mdi:palm-tree
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: garden
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }
              - type: custom:mushroom-template-card
                primary: Garage
                secondary: ''
                icon: mdi:garage
                icon_color: |-
                  white
                  {% if is_state('light.your_light', 'on') %}
                    orange
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: garage
                hold_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0.2);
                      color: var(--primary-color);
                    }

@ASNNetworks you work wonders my friend. Thank you. I now have it implemented but how do you center the title text and give it less padding so that the bottom boxes line up with the shopping list?

Hi, if you changed the title using grid card, I think the only way to change that is by using card-mod. I don’t use that myself though, so can’t help you with the correct code. If that doesn’t work as neat, I would just use my first code with your mushroom-template-cards as titles in vertical-stacks I created. Both codes work, while the first one will give you the titles as you had with mushroom :slight_smile:

If you already use your mushroom-template-card then best thing is to ask in that topic how to mod that card to align/center the text and remove padding. It’s all possible, but most likely you need card-mod.

There is a post with a lot of examples how to use card-mod: :small_blue_diamond: Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io) Perhaps you will find your solution there as well.

Sorry if asked before, but searched this thread and couldn’t find an answer.

How do you get the swipe-card to work nicely inside a grid layout (using layout-card, css grid with grid-areas)? I place the swipe-card in one of my grid-areas and want to achieve the default behaviour of swipe-card like in the last example of the start-post of this thread.

The undesired effect I get is that the 2 cards inside the swipe-card get displayed side by side and the grid-area is stretched (and my other grid-areas too):

btw, when leaving the edit-mode of the UI the area gets streched even more and takes over the entire dashboard.

code:

type: custom:swipe-card
view_layout:
  grid-area: row3_2
parameters:
  autoplay:
    delay: 6000
    speed: 3000
cards:
  - type: custom:button-card
    name: Agenda
    template: big_tile
    tap_action:
      action: navigate
      navigation_path: /dashboard-home/agenda
    custom_fields:
      custom_icon: '[[[ return `<img src="/local/images/icons8-calendar-96.png"/>` ]]]'
  - type: custom:button-card
    name: Agenda2
    template: big_tile
    tap_action:
      action: navigate
      navigation_path: /dashboard-home/agenda
    custom_fields:
      custom_icon: '[[[ return `<img src="/local/images/icons8-calendar-96.png"/>` ]]]'

Does anyone know how to change the color of the elements of swipebar (sliders, bullets, etc)?

been looking for just that today, see: 🔹 Card-mod - Add css styles to any lovelace card - #4191 by Mariusthvdb and only found my way through these just yet:

    swiper-pagination-color: red
    swiper-navigation-color: green
    swiper-navigation-size: 24px
    swiper-preloader-color: gold
#  :host {
#         --swiper-theme-color: var(--primary-color);
#       }

top variables can be set like that in your themes, or, like in the commented bit, directly in a card_mod.

as you can see the primary-color is used, so if you change that, it will also affect the swiper elements.

the pagination color only affects the active swiper bullet, for the other (inactive) bullets there is only a background color set, and an opacity:

Scherm­afbeelding 2023-01-22 om 23.10.16

the other theme variables are used in the resource:

    swiper-navigation-color: green #used on the navigation elements (left and right, arrows)
    swiper-navigation-size: 24px # used on those same elements
    swiper-preloader-color: gold #not sure where this applies

but I have yet to find where they apply :wink: I have set them in my theme like above now, so they would stand out, but they dont…
havent found the correct dom path yet to change those directly in a card config, and would really love to do so…

update

some detailed complexity: when using either bullets or progress bar on pagination, the theme color swiper-pagination-color is applied. However, when using fraction, to show 1/3, that same theme colors is not applied, and we have to go into inspector to reveal

Scherm­afbeelding 2023-01-23 om 12.07.57

using that:

            card_mod:
              style: |
                :host {
                  color: red;
                }

does Not work however…

made it this far:

            type: custom:mod-card
            card_mod:
              style:
                swipe-card:
                  $: |
                    /* colors the whole fraction  element: '1/3' */
                    /*.swiper-pagination-fraction {
                      color: white;
                    }*/
                    /* colors the '1'  in: '1/3' */
                    .swiper-pagination-current {
                      color: blue;
                    }
                    /* colors the '3'  in: '1/3' */
                    .swiper-pagination-total {
                      color: gold;
                    }
                .: |
                  ha-card {
                    font-weight: bold;
                    font-size: 20px;
                    color: white; */sets the full line, or only the '/', when the other elements are colored individually
                  }

unfortunately, the mod-card seems to lose some cards in the swiper… no idea why, but taking out the mod card brings them back…

1 Like

2 questions if I may…

  1. Have any Swiper gurus managed to enable hash navigation?

It’s shown below in the api:

I have buttons in a swipe-card that have a tap_action path of ‘#[my paths]’ which state-switch listens and swaps to the corresponding card.

It would be better if the buttons in Swipe Card were also listening for hash changes and move to the corresponding slide.

I have tried to add it into the parameters etc and manually adding "data-hash=“hash value” to the div class but I can’t figure it out.


  1. Has anyone run into this issue where by changing to a different view and then back causes the swiper to go to the last slide? If I refresh the page it always goes back to the specified slide but switching between views changes that (kitchen is what it should be one):

      type: custom:swipe-card
      card_width: 100%
      start_card: 1
      slideToClickedSlide: true
      parameters:
        centeredSlides: true
        slidesPerView: auto
        spaceBetween: 30
        slideToClickedSlide: true
        speed: 420
      cards:
        ......

FWIW:

I’ve raised the following issue on GitHub for the hash navigation:

I can get it to work if I manually define the class of the swipe-card slide data-hash="[my-hash-value]"

would be great if we could define this hash through the YAML config!

I have been looking into using javascript to add the data-hash class to each slide on page load but I’m having trouble navigating/targeting the specific slide through the DOM (I’m JS illiterate :grin:)

Would it be possible to change this variable with card_mod, since that basically overwrites css code as well?

I have tried card_mod but I wasn’t able to get it to give the element a new class.

As in outside of the style="…" class.

Screenshot 2023-01-24 at 17.04.53

needs to be <button-card class="swiper-slide swiper-slide-active" data-hash="my_hash" style="..."</>

If anyone else was looking for a way to label their slides, here’s a hack that inserts names onto bullets via card-mod, and then styles them like so:

swiper-labeled

Filler text via Hipsum :stuck_out_tongue:

type: custom:mod-card
card:
  type: custom:swipe-card
  parameters:
    pagination:
      type: bullets
      clickable: true
    effect: cube
    grabCursor: true
    cubeEffect:
      shadow: false
    loop: false
  cards:
    - type: markdown
      card_mod:
        class: nav_1
      content: >-
        I'm baby raw denim dreamcatcher viral, taxidermy lumbersexual portland
        occupy direct trade farm-to-table cliche seitan wayfarers activated
        charcoal cardigan. Tattooed big mood XOXO, green juice food truck fit
        echo park hexagon. Small batch put a bird on it intelligentsia JOMO,
        letterpress williamsburg glossier. Poutine bruh XOXO, etsy big mood
        jianbing kale chips tattooed flannel plaid chicharrones typewriter
        fingerstache. Squid ramps poutine, activated charcoal la croix DSA sus.
    - type: markdown
      card_mod:
        class: nav_2
      content: >-
        Occupy direct trade farm-to-table cliche seitan wayfarers activated
        charcoal cardigan. Tattooed big mood XOXO, green juice food truck fit
        echo park hexagon. Small batch put a bird on it intelligentsia JOMO,
        letterpress williamsburg glossier. Poutine bruh XOXO, etsy big mood
        jianbing kale chips tattooed flannel plaid chicharrones typewriter
        fingerstache. Squid ramps poutine, activated charcoal la croix DSA sus.
    - type: markdown
      card_mod:
        class: nav_3
      content: >-
        Leggings seitan tofu, shabby chic salvia narwhal lomo mlkshk shoreditch
        listicle ascot authentic vice. Semiotics cray ugh iceland polaroid
        meditation. Affogato ramps portland 3 wolf moon pickled bruh austin,
        hoodie skateboard subway tile literally. Seitan vegan letterpress
        knausgaard, tacos asymmetrical cardigan trust fund single-origin coffee
        palo santo keffiyeh gluten-free. Bicycle rights trust fund beard
        intelligentsia irony, typewriter sriracha subway tile kitsch truffaut
        selvage migas pork belly hashtag tonx. Venmo squid try-hard pug.
style:
  swipe-card$: |
    .swiper-container {
      margin: 0 0 0 0 !important;
      padding: 65px 30px 10px 30px !important;
    }
    .swiper-pagination-bullets {
    position: absolute;
    top: 15px;
    bottom: inherit !important;
    width: 100%;
    }
    .swiper-pagination-bullets>span {
    margin: 0px !important;
    min-width: 100px;
    min-height: 25px;
    padding-top: 5px;
    border-radius: 0;
    }
    .swiper-pagination-bullets>span:last-child {
    border-radius: 0px 10px 10px 0px;
    }
    .swiper-pagination-bullets>span:first-child {
    border-radius: 10px 0 0 10px;
    }
    .swiper-pagination-bullets>span:nth-child(1):before {
      content: "CAMS";
    }
    .swiper-pagination-bullets>span:nth-child(2):before {
      content: "CLIMATE";
    }
    .swiper-pagination-bullets>span:nth-child(3):before {
      content: "LAB";
    }
14 Likes

Hacked together some JS to add the data-hash to each slide in my slider and also adds a back card that when swiped returns to the beginning.

For some reason changing back to the view with which the swiper is on always shows the last slide (for me?), another reason for using the ‘back’ slide which automatically puts it back to the beginning on page load.

Also because the browser hash changes on swipe, no click is required which means that simply swiping the slider to the desired slide can change (in my case) a state-switch card.

Note: I have no JS experience or understanding and was hacked together. No idea on the performance implications of this and I’m sure there are far superior solutions! Please suggest :slight_smile:

          type: custom:swipe-card
          parameters:
            centeredSlides: true
            slidesPerView: auto
            spaceBetween: 30
            slideToClickedSlide: true
            hashNavigation:
              watchState: true
          cards:
            ......
let prevUrl = undefined;
setInterval(() => {
  const currUrl = window.location.href;
  if (currUrl != prevUrl) {
    const select1 = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > stack-in-card").shadowRoot.querySelector("ha-card > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > mod-card").shadowRoot.querySelector("ha-card > swipe-card").shadowRoot.querySelector('div.swiper-wrapper > [aria-label="1 / 5"]');
    const select2 = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > stack-in-card").shadowRoot.querySelector("ha-card > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > mod-card").shadowRoot.querySelector("ha-card > swipe-card").shadowRoot.querySelector('div.swiper-wrapper > [aria-label="2 / 5"]');
    const select3 = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > stack-in-card").shadowRoot.querySelector("ha-card > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > mod-card").shadowRoot.querySelector("ha-card > swipe-card").shadowRoot.querySelector('div.swiper-wrapper > [aria-label="3 / 5"]');
    const select4 = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > stack-in-card").shadowRoot.querySelector("ha-card > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > mod-card").shadowRoot.querySelector("ha-card > swipe-card").shadowRoot.querySelector('div.swiper-wrapper > [aria-label="4 / 5"]');
    const select5 = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > stack-in-card").shadowRoot.querySelector("ha-card > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > mod-card").shadowRoot.querySelector("ha-card > swipe-card").shadowRoot.querySelector('div.swiper-wrapper > [aria-label="5 / 5"]');
    var pathArray = window.location.pathname.split('/');
    if (pathArray[2] == '[your_view]' && window.location.hash == '' && (!select1.hasAttribute("data-hash"))) {
        window.location.hash = '#hash1'
        select1.setAttribute("data-hash","hash1");
        select2.setAttribute("data-hash","hash2");
        select3.setAttribute("data-hash","hash3");
        select4.setAttribute("data-hash","hash4");
        select5.setAttribute("data-hash","back");
    }
    else {
      if (pathArray[2] == '[your_view]' && window.location.hash == '#back' && (select1.hasAttribute("data-hash"))) {
        window.location.hash = '#hash1'
    }
    prevUrl = currUrl;
    }
  }
}, 100);

ezgif.com-gif-maker-10

6 Likes

Thats fantastic!

Can I change the background behind the text of the selected box somehow? :slight_smile:

Sure, those are stock markdown cards, so they can be altered with card-mod (or you can use whatever other cards you want)

Sorry, I mean this background. :grin:

Ah; gotcha. That’s here:

    .swiper-pagination-bullets>span {
    margin: 0px !important;
    min-width: 100px;
    min-height: 25px;
    padding-top: 5px;
    border-radius: 0;
    background: red; /* <---- */
    }
1 Like

I found something thanks to flufftronix

Спойлер
type: custom:mod-card
style:
  swipe-card:
    $: |
      .swiper-pagination-bullet {
        background-color: rgba(108, 108, 108, 0.3) !important;
        width: 50px !important;
        height: 50px !important;
      }
      .swiper-container {
        margin: 0 0 -10px 0 !important;
        padding: 0px 30px 20px 30px !important;
      }
card:
  type: custom:swipe-card
...

изображение

3 Likes