Swipe-card : configuration défilement

Bonjour à tous,

Je cherche le paramètre pour défiler le header de bouton en bouton. Actuellement ça passe de « page en page » (page = 5 boutons).
Pouvez-vous m’aider svp ?

Enregistrement de l’écran 2025-02-05 à 11.26.25

type: custom:swipe-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Cam
        secondary: ""
        icon: mdi:cctv
        icon_color: primary
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/camera
        badge_icon: ""
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:mushroom-template-card
        primary: Énergie
        secondary: ""
        icon: mdi:lightning-bolt
        icon_color: orange
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/edf
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:mushroom-template-card
        primary: Météo
        secondary: ""
        icon: mdi:clouds
        icon_color: green
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/meteo
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:mushroom-template-card
        primary: Labo
        secondary: ""
        icon: mdi:flask
        icon_color: purple
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/labo
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:mushroom-template-card
        primary: Net
        secondary: ""
        icon: mdi:network-outline
        icon_color: red
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/reseau
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Awtrix
        secondary: ""
        icon: mdi:clock-digital
        icon_color: primary
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/awtrix
        badge_icon: ""
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:mushroom-template-card
        primary: Carbu
        secondary: ""
        icon: mdi:gas-station
        icon_color: orange
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/carburants
        badge_icon: ""
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:mushroom-template-card
        primary: Pollens
        secondary: ""
        icon: mdi:flower-pollen
        icon_color: green
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: /dashboard-telephone/pollens
        badge_icon: ""
        card_mod:
          style: |
            ha-card {
              background: none;
              border: none;
            }
      - type: custom:button-card
        styles:
          card:
            - background: none
            - border: none
      - type: custom:button-card
        styles:
          card:
            - background: none
            - border: none

Merci d’avance pour votre aide !

Salut,

Regarde du coté de l’option slidesPerView: 1

J’ai vu ton post également mais je n’ai pas trouvé la solution.
Ce paramètre ne fonctionne pas :

type: custom:swipe-card
parameters:
  slidesPerView: 1

Essaye en virant la partie intermédiaire horizontal-stack

1 « J'aime »

C’est bon j’ai trouvé, en supprimant les horizontal-stack + slidesPerView: 5 !
Merci.

type: custom:swipe-card
parameters:
  slidesPerView: 5
cards:
  - type: custom:mushroom-template-card
    primary: Cam
    secondary: ""
    icon: mdi:cctv
    icon_color: primary
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/camera
    badge_icon: ""
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Énergie
    secondary: ""
    icon: mdi:lightning-bolt
    icon_color: orange
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/edf
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Météo
    secondary: ""
    icon: mdi:clouds
    icon_color: green
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/meteo
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Labo
    secondary: ""
    icon: mdi:flask
    icon_color: purple
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/labo
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Net
    secondary: ""
    icon: mdi:network-outline
    icon_color: red
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/reseau
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Awtrix
    secondary: ""
    icon: mdi:clock-digital
    icon_color: primary
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/awtrix
    badge_icon: ""
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Carbu
    secondary: ""
    icon: mdi:gas-station
    icon_color: orange
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/carburants
    badge_icon: ""
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:mushroom-template-card
    primary: Pollens
    secondary: ""
    icon: mdi:flower-pollen
    icon_color: green
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /dashboard-telephone/pollens
    badge_icon: ""
    card_mod:
      style: |
        ha-card {
          background: none;
          border: none;
        }
  - type: custom:button-card
    styles:
      card:
        - background: none
        - border: none
  - type: custom:button-card
    styles:
      card:
        - background: none
        - border: none