Lovelace: Swiper card

Hi, just came across this card, so far so good, i just have one annoying issue. the swipe card seems to cut off my mushroom cards. see below on the corners. how do i make the swipe card bigger??
image

type: custom:swipe-card
start_card: 1
parameters:
  autoHeight: false
  initialSlide: 0
  centeredSlides: true
  effect: coverflow
  loop: false
  preventClicksPropagation: true
  preventClicks: true
cards:
  - type: vertical-stack
    cards:

You can try the solutions mentioned in the issue reported, or wait till it’s fixed someday: Add a box-shadow to the card · Issue #51 · bramkragten/swipe-card (github.com)

Legend! thanks

Wow this has done so much for my dashboard, thank you!
One issue though, is there a way to “reset” the swipe card after I’ve changed view/tab? It’s annoying to return to the home page, and have all the swipers showing all but the start card.

As a word to those who want to change elements in this card, the fact that it’s no longer maintained has a silver lining in that changes you make in swipe-card.js won’t be overwritten. Obviously the changes will apply to every instance of the card, for better or worse.
Ex: I modified the color of the scrollbar by changing this line:

.swiper-scrollbar-drag {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background: rgba(200, 200, 200, 0.7);\n  border-radius: 10px;\n  left: 0;\n  top: 0;\n}

Edit: clear the cache after reloading resources…

While I agree with your advice about potentially editing the JavaScript file (and do it myself to make the scrollbar bigger for my fat fingers) to be fair to the developer, the card was updated only 17 days ago.

Ah, thus a bunch of confusion above in the posts back in January.
PSA: don’t use

Instead use the HACS link

Hi, Does anyone know if it’s possible to call a service or script in the Swipe-card event?

2 Likes

HI.
I’m having problems with the starting card. Everytime that I refresh the page it goes to the last card that I have inside the slide. This is the yaml code:

type: custom:swipe-card
start_card: 1
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
cards:
1 Like

I started to notice issue, not sure if it started with HA 2022.12.0 but I have one swipe-card on my home screen. Regardless if through companion app or web browser, when I open HA, card does not load. When I refresh in webbrowser, it shows up. In companion app - since I cannot refresh - sometimes I select “edit dashboard” and I do see “card” there - actually blank with EDIT option. I select EDIT, see the config and preview there. When I hit cancel or edit something in it and hit OK, the card loads back

Anyone having the same issues? It worked flawlessly for ages.

Has anyone out a grid card in a swiper card in a vertical stack?, I think it is possible I’m just a YAML idiot. If so please help me out.

hiding the scroll bar does not hide the scroll bar during scrolling?
I have scrollbar set to : hide, and autoplay enabled.
Each time, during the actual scrolling or auto slideshow, the scroll bar appears, then disappears again.
Is there any way to hide it completely?

Hey!

Is it possible to set automatic switching of cards, for example, from 1 to 3 every 10 seconds?

Addon works pefectly, but auto switching would be great :blush:

1 Like

How can I call a service when I swipe my card?

Hi Guys. Can someone help me with creating a slider for the below image. I’d like 3 swipe cards - downstairs, upstairs and outside.

I have the code for what i’ve created BUT I can’t seem to get each ‘button’ for the area on one slider - they all fall into individual sliders and I end up with about 20 slides.

Without your code it’s impossible to tell you how to alter your code in order to achieve what you want. There are 10 different ways to code your current dashboard.

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);
                    }