Lovelace: Swiper card

Hi!

I can’t get it to work with that either.
Could you share your code? :slight_smile:

Sure

      - type: grid
        title: Media ↔
        view_layout:
          grid-area: media
        columns: 1
        cards:
          - type: custom:swipe-card
            start_card: 1
            parameters:
              roundLengths: true
              effect: coverflow
              speed: 650
              spaceBetween: 20
              threshold: 7
              coverflowEffect:
                rotate: 80
                depth: 300
            cards:
              - type: grid
                columns: 2
                cards:
                  - type: custom:button-card
                    entity: sensor.ps5_069_activity
                    double_tap_action: !include popup/woonkamer_playstation.yaml
                    name: Playstation
                    template:
                      - media
                      - icon_ps5

                  - type: custom:button-card
                    name: Sonos
                    entity: media_player.tv_speaker
                    template:
                      - media
                      - icon_sonos

                  - type: custom:button-card
                    entity: media_player.spotify_toutje_home
                    name: Spotify
                    template:
                      - media
                      - icon_spotify

                  - type: custom:button-card
                    entity: media_player.apple_tv
                    name: Apple TV
                    template:
                      - media
                      - icon_apple_tv
              - type: grid
                columns: 2
                cards:
                  - type: custom:button-card
                    entity: media_player.tv_woonkamer
                    name: Televisie
                    state_display: >
                      [[[
                        if (variables.state === 'playing') {
                          return 'Aan';
                        }
                        if (variables.state === true) {
                          return variables.translate_off;
                        }
                      ]]]
                    variables:
                      circle_input: >
                        [[[ 
                          let volume = states['sensor.tv_speaker_volume'];
                          if (volume) return parseInt(volume.state);
                        ]]]
                      circle_input_unit: "%"
                    double_tap_action: !include popup/woonkamer_tv.yaml
                    template:
                      - base
                      - icon_tv
                      - circle
                      - loader
                  - type: custom:button-card
                    entity: media_player.viera_ut50_series
                    name: Televisie
                    state_display: >
                      [[[
                        if (variables.state === 'playing') {
                          return 'Aan';
                        }
                        if (variables.state === true) {
                          return variables.translate_off;
                        }
                      ]]]
                    variables:
                      circle_input: >
                        [[[ 
                          let volume = states['sensor.tv_speaker_volume'];
                          if (volume) return parseInt(volume.state);
                        ]]]
                      circle_input_unit: "%"
                    double_tap_action: !include popup/woonkamer_tv.yaml
                    template:
                      - base
                      - icon_tv
                      - circle
                      - loader
1 Like

It’s probably me who was unclear now.

It’s along with this that I can’t get it to work
Lovelace: Swiper card - #581 by flufftronix :smiley:

I’m not sure exactly sure what’s going on here either, but I do get the same bug: swipe interactions remain, but no tap/hold interactions register.

If you omit the absolute positioning for the bullets that interactive functionality per slide remains, but then the “bullets” return to the bottom. I’ll try tinkering around with some other layout options. And/or maybe this also happens upstream in slider.is in general, in which case perhaps there’s a workaround there.

EDIT: Found it. The bullets come formatted with bottom: 10px on them, so when that’s combined with position: absolute; and top: 0;, the bullet container stretches over the slides entirely. Slider.js can override this for the slide swiping, but not the content.

Adding bottom: inherit !important; to .swiper-pagination-bullets fixes this. Edited that into my original snippet above.

1 Like

I haven’t tried with this particular snippet (yet; I’d like to) but I’ve added other JavaScript via either listing it as a resource in configuration.yaml like this (see “loading extra javascript”), or per dashboard in Settings > Dashboard > 3 dots in the upper right corner > Resources like this.

In either case, uploading to /config/www/file.js is indicated by using /local/file.js for the path. (Also helpful to know: edits to these js files won’t immediately appear on refresh in the companion app, you need to head to Settings > Companion App > Reset Frontend Cache on the iOS app… not sure on the Android one)

1 Like

Just came across a workaround to this, since loop: true is still showing me a blank first slide:

Using rewind: true instead. Slightly different effect, but it does allow for cycling through all the slides without a blank.

1 Like

Love the dude, can you use use mdi icons instead of labels ?

Yes, though the only way I know that would work for it would be to paste in the SVG code (find the icon you want to use on the material design icons site, and use the copy code button) where the text label would go:

Thanks, I tried it but unfortunately, I can’t get the icon to render. :thinking:

    .swiper-pagination-bullets>span:nth-child(4):before {
      content: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>grill-outline</title><path d="M17 22A3 3 0 1 0 14.18 18H9.14L11.13 14.94A6.36 6.36 0 0 0 12.87 14.94L13.89 16.5C14.31 16 14.85 15.56 15.5 15.3L14.89 14.37A7 7 0 0 0 19 8H5A7 7 0 0 0 9.12 14.37L5.17 20.45A1 1 0 0 0 6.84 21.54L7.84 20H14.18A3 3 0 0 0 17 22M17 18A1 1 0 0 1 18 19C18 19.55 17.55 20 17 20S16 19.55 16 19A1 1 0 0 1 17 18M7.42 10H16.58A5 5 0 0 1 7.42 10M9.41 7H10.41C10.56 5.85 10.64 5.36 9.5 4.04C9.1 3.54 8.84 3.27 9.06 2H8.07A3.14 3.14 0 0 0 8.96 4.96C9.18 5.2 9.75 5.63 9.41 7M11.89 7H12.89C13.04 5.85 13.12 5.36 12 4.04C11.58 3.54 11.32 3.26 11.54 2H10.55A3.14 3.14 0 0 0 11.44 4.96C11.67 5.2 12.24 5.63 11.89 7M14.41 7H15.41C15.56 5.85 15.64 5.36 14.5 4.04C14.1 3.54 13.84 3.27 14.06 2H13.07A3.14 3.14 0 0 0 13.96 4.96C14.18 5.2 14.75 5.63 14.41 7Z" /></svg>';

This goes beyond my understanding as to why exactly it works, but I was able to get an SVG to show up in the content: using base64 as described here.

1 Like

yeah, so I tried too, but I cant get it to go back after the last slide…

# https://swiperjs.com/swiper-api#parameters
      parameters:
        rewind: true
#         loop: true #continue from last to first
#         loopPreventsSliding: false
        effect: cube #cards
        pagination:
          type: bullets #progressbar #fraction
        navigation:
#         simulateTouch: true
#         spaceBetween: 4
        preloadImages: true
        preventInteractionOnTransition: true
        preventClicks: true
#         freeMode: true
        sticky: true
#         momentum: true
#         grabCursor: true
#         slidesPerView: 3
#               keyboard:
#                 enabled: true
#                 onlyInViewport: true

Ive tried various pagination options, which didnt make a difference. How do you set rewind, and get it functional?

For some reason I can’t get mushroom-chips-cards to work with the swipe cards mods ? I am not sure if it just me.

Anyone has an idea why my “button-cards” don’t show up? they do in the editor when i modify the code, but disapear when I save!

Any help is welcomed.

> type: vertical-stack
> cards:
>   - square: true
>     columns: 10
>     type: grid
>     cards:
>       - show_name: false
>         show_icon: true
>         type: button
>         tap_action:
>           action: navigate
>           navigation_path: /tablet-entrance-dashboard/0
>         icon: mdi:arrow-left-thick
>         show_state: false
>         hold_action:
>           action: navigate
>           navigation_path: /tablet-entrance-dashboard/main-view
>       - show_name: true
>         show_icon: true
>         type: button
>         tap_action:
>           action: toggle
>         entity: input_boolean.random_colors
>         icon: mdi:shuffle-variant
>         hold_action:
>           action: toggle
>         theme: synthwave
>       - show_name: true
>         show_icon: true
>         type: button
>         tap_action:
>           action: toggle
>         entity: input_boolean.random_pastel_colors
>         name: Pastel Colors
>         icon: mdi:shuffle
>       - show_name: true
>         show_icon: true
>         type: button
>         tap_action:
>           action: toggle
>         entity: input_button.generate_warm_colors
>         name: Warm Colors
>         icon: mdi:shuffle
>       - show_name: true
>         show_icon: true
>         type: button
>         tap_action:
>           action: toggle
>         entity: input_button.generate_light_warm_colors
>         name: Pale Warm Colors
>       - type: custom:mushroom-chips-card
>         chips:
>           - type: entity
>             entity: input_boolean.trippy_lights_effect
>           - type: entity
>             entity: input_number.trippy_lights_effect_speed
>           - type: entity
>             entity: input_number.trippy_lights_color_saturation
>   - type: custom:swipe-card
>     cards:
>       - type: vertical-stack
>         cards:
>           - type: vertical-stack
>             cards:
>               - color: auto
>                 color_type: card
>                 double_tap_action:
>                   action: call-service
>                   service: light.toggle
>                   service_data:
>                     entity_id: light.all_lights
>                 icon: mdi:lightbulb-multiple
>                 name: Groups
>                 styles:
>                   card:
>                     - font-size: 14px
>                     - font-weight: bold
>                     - height: 120px
>                     - color: white
>                     - background: rgb(90, 20, 90)
>                 type: custom:button-card
>               - type: custom:mushroom-light-card
>                 entity: light.group_all_inside_lights
>                 name: All Indoor Lights
>                 fill_container: false
>                 show_brightness_control: true
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:lightbulb-group
>                 layout: horizontal
>                 primary_info: name
>                 show_color_temp_control: true
>                 collapsible_controls: false
>               - type: horizontal-stack
>                 cards:
>                   - type: custom:mushroom-light-card
>                     entity: light.group_entrance_lights
>                     name: Entrance
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:door
>                     layout: horizontal
>                     primary_info: name
>                   - type: custom:mushroom-light-card
>                     entity: light.group_hallway_lights
>                     name: Hallway
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: ''
>                     layout: horizontal
>                     primary_info: name
>               - type: horizontal-stack
>                 cards:
>                   - type: custom:mushroom-light-card
>                     entity: light.group_closet_lights
>                     name: Closet Lights
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:string-lights
>                     layout: horizontal
>                     primary_info: name
>                   - type: custom:mushroom-light-card
>                     entity: light.group_office_lights
>                     name: Office
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: ''
>                     layout: horizontal
>                     primary_info: name
>               - type: horizontal-stack
>                 cards:
>                   - type: custom:mushroom-light-card
>                     entity: light.group_livingroom_lights
>                     name: Living Room
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:television
>                     layout: horizontal
>                     primary_info: name
>                   - type: custom:mushroom-light-card
>                     entity: light.group_chillingroom_lights
>                     name: ChillingRoom
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:pine-tree-box
>                     layout: horizontal
>                     primary_info: name
>                     show_color_temp_control: false
>               - type: horizontal-stack
>                 cards:
>                   - type: custom:mushroom-light-card
>                     entity: light.group_kitchen_lights
>                     name: Kitchen
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:silverware-variant
>                     layout: horizontal
>                     primary_info: name
>                   - type: custom:mushroom-light-card
>                     entity: light.group_hotbox_lights
>                     name: Hotbox
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:cannabis
>                     layout: horizontal
>                     primary_info: name
>               - type: horizontal-stack
>                 cards:
>                   - type: custom:mushroom-light-card
>                     entity: light.group_server_lights
>                     name: Server
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:server-security
>                     layout: horizontal
>                     primary_info: name
>                   - type: custom:mushroom-light-card
>                     entity: light.plug_patio_light
>                     name: Patio
>                     fill_container: false
>                     show_brightness_control: true
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:patio-heater
>                     layout: horizontal
>                     primary_info: name
>           - type: horizontal-stack
>             cards:
>               - type: vertical-stack
>                 cards:
>                   - color: auto
>                     color_type: card
>                     double_tap_action:
>                       action: call-service
>                       service: light.toggle
>                       service_data:
>                         entity_id: light.group_livingroom_lights
>                     icon: mdi:monitor
>                     name: Living Room
>                     styles:
>                       card:
>                         - font-size: 14px
>                         - font-weight: bold
>                         - height: 120px
>                         - color: white
>                         - background: rgb(100, 0, 0)
>                     type: custom:button-card
>                   - type: custom:mushroom-light-card
>                     entity: light.group_livingroom_lights
>                     name: Living Room
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:lightbulb-group
>                   - type: custom:mushroom-light-card
>                     entity: light.livingroom_center_light
>                     name: Chandelier
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:chandelier
>                   - type: custom:mushroom-light-card
>                     entity: light.livingroom_behind_tv_light
>                     name: Behind TV
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:television-ambient-light
>                   - type: custom:mushroom-light-card
>                     entity: light.livingroom_window_light
>                     name: Window
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:window-closed-variant
>               - type: vertical-stack
>                 cards:
>                   - color: auto
>                     color_type: card
>                     double_tap_action:
>                       action: call-service
>                       service: light.toggle
>                       service_data:
>                         entity_id: light.group_chillingroom_lights
>                     icon: mdi:pine-tree
>                     name: Chilling Room
>                     styles:
>                       card:
>                         - font-size: 14px
>                         - font-weight: bold
>                         - height: 120px
>                         - color: white
>                         - background: rgb(150, 0, 150)
>                     type: custom:button-card
>                   - type: custom:mushroom-light-card
>                     entity: light.group_chillingroom_lights
>                     name: Chilling Room
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:lightbulb-group
>                   - type: custom:mushroom-light-card
>                     entity: light.chillingroom_ceiling_light
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:wall-sconce-flat
>                     name: Ceiling Light
>                   - type: custom:mushroom-light-card
>                     entity: light.chillingroom_christmas_tree_light
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: mdi:pine-tree
>                     name: Christmas Tree
>                   - type: custom:mushroom-light-card
>                     entity: light.chillingroom_colo_light
>                     fill_container: false
>                     show_brightness_control: true
>                     layout: horizontal
>                     show_color_control: true
>                     tap_action:
>                       action: more-info
>                     hold_action:
>                       action: toggle
>                     double_tap_action:
>                       action: toggle
>                     use_light_color: true
>                     icon: ''
>                     name: ColoLight
>       - type: horizontal-stack
>         cards:
>           - type: vertical-stack
>             cards:
>               - color: auto
>                 color_type: card
>                 double_tap_action:
>                   action: call-service
>                   service: light.toggle
>                   service_data:
>                     entity_id: light.group_office_lights
>                 icon: mdi:monitor-dashboard
>                 name: Office
>                 styles:
>                   card:
>                     - font-size: 14px
>                     - font-weight: bold
>                     - height: 120px
>                     - color: white
>                     - background: rgb(200, 30, 30)
>                 type: custom:button-card
>               - type: custom:mushroom-light-card
>                 entity: light.group_office_lights
>                 name: Office Lights
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:lightbulb-group
>               - type: custom:mushroom-light-card
>                 entity: light.office_lamp1_light
>                 name: Lamp 1
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:floor-lamp-dual
>               - type: custom:mushroom-light-card
>                 entity: light.office_lamp2_light
>                 name: Lamp 2
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:floor-lamp-dual
>               - type: custom:mushroom-light-card
>                 entity: light.quotra_office_light
>                 name: Quotra Circle
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:circle-outline
>           - type: vertical-stack
>             cards:
>               - color: auto
>                 color_type: card
>                 double_tap_action:
>                   action: call-service
>                   service: light.toggle
>                   service_data:
>                     entity_id: light.group_kitchen_lights
>                 icon: mdi:silverware-fork-knife
>                 name: Kitchen
>                 styles:
>                   card:
>                     - font-size: 14px
>                     - font-weight: bold
>                     - height: 120px
>                     - color: white
>                     - background: rgb(0, 230, 230)
>                 type: custom:button-card
>               - type: custom:mushroom-light-card
>                 entity: light.group_kitchen_lights
>                 name: Kitchen
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:lightbulb-group
>               - type: custom:mushroom-light-card
>                 entity: light.kitchen_1_light
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:numeric-1-box
>                 name: First
>               - type: custom:mushroom-light-card
>                 entity: light.kitchen_2_light
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:numeric-2-box
>                 name: Second
>               - type: custom:mushroom-light-card
>                 entity: light.kitchen_3_light
>                 fill_container: false
>                 show_brightness_control: true
>                 layout: horizontal
>                 show_color_control: true
>                 tap_action:
>                   action: more-info
>                 hold_action:
>                   action: toggle
>                 double_tap_action:
>                   action: toggle
>                 use_light_color: true
>                 icon: mdi:numeric-3-box
>                 name: Third

impossible to test for us like that. please provide a ‘minimal’ config that does not work

For me, same problem

type: custom:button-card
custom_fields:
  graph:
    card:
      type: custom:swipe-card
      parameters:
        effect: fade
        fadeEffect:
          crossFade: true
        slideShadows: false
        autoplay:
          delay: 1500
          speed: 1000
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              icon: mdi:lamp
              styles:
                card:
                  - width: 120px
                  - height: 120px
                  - border-radius: 10px
                  - background-color: white
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              icon: mdi:sofa
              styles:
                card:
                  - width: 120px
                  - height: 120px
                  - background-color: white

Screenshot 2023-02-14 111936

Hi everyone.

I have some questions for the swiper card.

  1. If cconditional cards are being used with Autoheight feature, when the card is not shown, the next card does not apply autoheight feature. Is there any way to solve that ?

type: custom:layout-card
layout: masonry
cards:
  - type: grid
    columns: 5
    square: false
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:swipe-card
            card_width: 100%
            style: |
              ha-card {
                height: 85vh;
              }
            parameters:
              autoHeight: true
              slidesPerView: auto
              allowTouchMove: true
              spaceBetween: 8
              speed: 35
              direction: vertical
              scrollbar:
                hide: true
                draggable: false
                snapOnRelease: false
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-template-card
                    icon: mdi:television
                    primary: null
                    secondary: null
                    entity: input_boolean.notify_home3
                    fill_container: false
                    multiline_secondary: false
                    layout: horizontal
                    style: |
                      mushroom-card {
                        background-size: 42px 42px;
                        {% if is_state('input_boolean.notify_home4', 'on') %}
                        {% else %}
                          filter: grayscale(100%);
                        {% endif %} 
                      }
                      mushroom-shape-icon {
                        --shape-color: none !important;
                      }  
                        ha-card { 
                          background: rgba(156, 27, 12, 0.2);
                        {% if is_state('input_boolean.notify_home3', 'on') %}
                        {% else %}
                        background: #1a1a1a;
                        {% endif %}  
                          width: 36px;
                          border-radius: 15px;
                          margin-top: 10px;
                          margin-left: auto;
                          margin-right: auto;
                          margin-bottom: 10px;
                          box-shadow: 0px 0px 6px 6px rgba(156,27,12,0.96) !important;
                        }
                      .swiper-container" 
                        style="width:100%;height;400px"
              - type: horizontal-stack
                cards:
                  - type: custom:vertical-stack-in-card
                    cards:
                      - type: picture-entity
                        entity: climate.146235046506144_climate
                        show_state: false
                        show_name: false
                        image: /local/room-cards/kaira.png
                        tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_ac
                        double_tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_kapat
                        theme: Mushroom
                        card_mod:
                          style: |
                            :host {
                              --ha-card-background: none;
                              height: 10px; 
                            }
                            ha-card {
                              background: none;
                              margin-top: 45px;
                              margin-left: 10px;
                              margin-right: 10px;
                              margin-bottom: auto;
                              padding: 0
                              height: 10x;                                     
                              width: auto;
                            }
                      - type: custom:mushroom-template-card
                        secondary: '{{ states(''sensor.hue_motion_temp_salon'')  }} °C'
                        primary: Vestel
                        entity: entity.entity
                        icon: mdi:weather-partly-cloud
                        tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_ac
                        double_tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_kapat
                        fill_container: false
                        multiline_secondary: false
                        layout: horizontal
                        style: |
                          mushroom-card {
                            background-size: 42px 42px;
                          }
                          mushroom-shape-icon {
                            --shape-color: none !important;
                          }  
                          ha-card { 
                            background: none;
                            margin-top: 0px;
                            margin-left: 20px;
                            margin-right: auto;
                            margin-bottom: 20px;
                          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:swipe-card
            style: |
              ha-card {
                height: 85vh;
              }
            parameters:
              autoHeight: true
              slidesPerView: auto
              allowTouchMove: true
              spaceBetween: 8
              speed: 35
              direction: vertical
              scrollbar:
                hide: true
                draggable: true
                snapOnRelease: true
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-template-card
                    icon: mdi:television
                    primary: null
                    secondary: null
                    entity: input_boolean.notify_home3
                    fill_container: false
                    multiline_secondary: false
                    layout: horizontal
                    style: |
                      mushroom-card {
                        background-size: 42px 42px;
                        {% if is_state('input_boolean.notify_home4', 'on') %}
                        {% else %}
                          filter: grayscale(100%);
                        {% endif %} 
                      }
                      mushroom-shape-icon {
                        --shape-color: none !important;
                      }  
                        ha-card { 
                          background: rgba(156, 27, 12, 0.2);
                        {% if is_state('input_boolean.notify_home3', 'on') %}
                        {% else %}
                        background: #1a1a1a;
                        {% endif %}  
                          width: 36px;
                          border-radius: 15px;
                          margin-top: 10px;
                          margin-left: auto;
                          margin-right: auto;
                          margin-bottom: 10px;
                          box-shadow: 0px 0px 6px 6px rgba(156,27,12,0.96) !important;
                        }
              - type: horizontal-stack
                cards:
                  - type: custom:vertical-stack-in-card
                    cards:
                      - type: picture-entity
                        entity: climate.146235046506144_climate
                        show_state: false
                        show_name: false
                        image: /local/room-cards/kaira.png
                        tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_ac
                        double_tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_kapat
                        theme: Mushroom
                        card_mod:
                          style: |
                            :host {
                              --ha-card-background: none;
                              height: 10px; 
                            }
                            ha-card {
                              background: none;
                              margin-top: 45px;
                              margin-left: 10px;
                              margin-right: 10px;
                              margin-bottom: auto;
                              padding: 0
                              height: 10x;                                     
                              width: auto;
                            }
                      - type: custom:mushroom-template-card
                        secondary: '{{ states(''sensor.hue_motion_temp_salon'')  }} °C'
                        primary: Vestel
                        entity: entity.entity
                        icon: mdi:weather-partly-cloud
                        tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_ac
                        double_tap_action:
                          action: call-service
                          service: scene.turn_on
                          data: {}
                          target:
                            entity_id: scene.klima_kapat
                        fill_container: false
                        multiline_secondary: false
                        layout: horizontal
                        style: |
                          mushroom-card {
                            background-size: 42px 42px;
                          }
                          mushroom-shape-icon {
                            --shape-color: none !important;
                          }  
                          ha-card { 
                            background: none;
                            margin-top: 0px;
                            margin-left: 20px;
                            margin-right: auto;
                            margin-bottom: 20px;
                          }
                card_mod:
                  style: |
                    ha-card {  
                      background: rgba(var(--rgb-primary-text-color), 0.035);
                      height: auto;
                      margin-left: -100px !important;
                      }
        card_mod:
          style: |
            ha-card {  
              background: rgba(var(--rgb-primary-text-color), 0.035);
              height: auto;}

Just like in this example. Is there a way to force width of the slide when swiped vertically ? Currently it looks like this.

image

My final question is how can we use swiper card with light sliders ? Currently it becomes very hard to drag sliders. İs there a way to prevent this ?

Sorry I know it’s been too many questions but I am building a new dashboard mostly dependent on swiper cards. I need to know the answers to these questions. thanks for help.

Hi!
Why does my swipe card sometime start on the last card? I have start_card: 1
But sometimes when i refresh it shows the last card, but not all the times but sometimes.

This is one of my cards:

type: custom:swipe-card
title: null
card_width: 100%
start_card: 1
reset_after: 10
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 110
    stretch: 90
    depth: 633
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
cards:
  - type: custom:tesla-style-solar-power-card
    hide_inactive_lines: 1
    show_gap: true
    change_house_bubble_color_with_flow: 1
    grid_to_house_entity: sensor.template_grid_consumption
    generation_to_grid_entity: sensor.template_grid_feed_in
    generation_to_house_entity: sensor.template_curent_solar_consumption
    house_entity: sensor.house_consumption_daily
    generation_entity: sensor.daily_yield
    grid_entity: sensor.grid_import_solar_daily_energy
    house_extra_entity: sensor.grid_import_solar_daily_energy
    generation_extra_entity: sensor.daily_yield
    grid_extra_entity: sensor.grid_export_solar_daily_energy
  - type: gauge
    entity: sensor.input_power
    min: 0
    max: 12000
    needle: true
    severity:
      green: 3000
      yellow: 1000
      red: 0
    name: Nuvarande Effekt från solpaneler
  - type: gauge
    entity: sensor.grid_active_power
    min: -8000
    max: 8000
    needle: true
    severity:
      green: 0
      red: -8000
    name: '-Från nätet +Från solpaneler'
  - type: gauge
    entity: sensor.day_active_power_peak
    min: 0
    max: 12000
    needle: true
    severity:
      green: 6000
      yellow: 3000
      red: 0
    name: Högsta toppeffekt idag
  - type: gauge
    entity: sensor.internal_temperature
    min: 0
    max: 65
    needle: true
    severity:
      green: 0
      yellow: 59
      red: 59.5
      name: Inverter Temperatur
    line_color: '#4BC0C0'
  - type: gauge
    entity: sensor.grid_frequency
    min: 49.5
    max: 50.2
    needle: true
    severity:
      green: 49.5
      red: 50.1
    name: Frekvens
    line_color: '#4BC0C0'
  - type: custom:mini-graph-card
    entities:
      - sensor.total_yield
    line_color: red
    line_width: 3
    name: Totalt producerat
    font_size: 75
  - type: custom:mini-graph-card
    entities:
      - sensor.grid_exported
    line_color: red
    line_width: 3
    name: Totalt såld el
    font_size: 75

- type: custom:swipe-card 
      cards:
        - square: false
          columns: 2
          type: grid
          cards:
            - type: horizontal-stack
              cards:      
                - type: 'custom:button-card'
                  template: card_title
                  label: Kamer 
                - type: 'custom:button-card'
                  template: card_title
                  label:                  

            - type: horizontal-stack 
              cards:      
                - type: "custom:button-card"
                  template: card_light
                - type: "custom:button-card"
                  template: card_light

Why is the buttoncard “kamer” and de empty buttoncard not in the same swipe ?
On screen the “kamer” and the 2 light buttons are next to each other, and not kamer with the 2 buttons below …

Because you have ONE Grid card listed in the swipe-card.

        - square: false
          columns: 2
          type: grid
          cards:
            - type: horizontal-stack
              cards:      
                - type: 'custom:button-card'
                  template: card_title
                  label: Kamer 
                - type: 'custom:button-card'
                  template: card_title
                  label:                  

            - type: horizontal-stack 
              cards:      
                - type: "custom:button-card"
                  template: card_light
                - type: "custom:button-card"
                  template: card_light

This is one card, since your put it as a block under:


- type: custom:swipe-card 
  cards:
    - YOUR CODE

If you want to swipe between cards, you need to list them as multiple cards, so:

- type: custom:swipe-card 
  cards:
    - CODE CARD 1
    - CODE CARD 2

The same reason why you have 2 different cards inside your horizontal-stack card, and you have 2 different horizontal-stack cards inside your grid, you will have to use 2 cards in swipe card, in order to have… 2 cards :wink: .

TL;DR all swipe-card does is swipe between the cards you put there as cards. If you put it all as one code block under cards this means you in fact have one card.

thanks for answering this fast. But this is not the problem. I have another square below. It is in the “code Card 1” something is wrong

The 2 buttons should be below “Kamer Mattheo” and the empty one