Lovelace: Swiper card

sebyldino · June 21, 2021, 8:52am

I think it cant works if the swipe card is inclued in another custom card. I removed all cards except this swipe card and still does not work.

type: 'custom:layout-card'
layout: grid
gridrows: 130px 130px 165px 59px 59px
gridcols: 65px 65px 300px 300px 230px
cards:
  - type: 'custom:swipe-card'
    card_width: 230px
    start_card: 2
    parameters:
      effect: coverflow
      grabCursor: true
      centeredSlides: true
      slidesPerView: auto
      coverflowEffect:
        rotate: 50
        stretch: 0
        depth: 80
        modifier: 1
        slideShadows: true
      pagination:
        type: bullets
    cards:
      - type: 'custom:mini-graph-card'
        line_width: 5
        entities:
          - sensor.speedtest_upload
        font_size: 40
        line_color: cyan
        show:
          name: true
          header: false
          icon: 'mdi:cloud-upload'
          fill: fade
        decimals: 0
        height: 50
        hour24: true
        animate: true
      - type: 'custom:mini-graph-card'
        line_width: 5
        entities:
          - sensor.speedtest_download
        font_size: 40
        line_color: greenyellow
        show:
          name: true
          header: false
          icon: true
          fill: fade
        decimals: 0
        height: 50
        hour24: true
        animate: true
      - type: 'custom:mini-graph-card'
        line_width: 5
        entities:
          - sensor.speedtest_ping
        font_size: 40
        line_color: deeppink
        show:
          name: true
          header: false
          icon: true
          fill: fade
        decimals: 0
        height: 50
        hour24: true
        animate: true
    gridcol: 1/4
    gridrow: 4/6

IgnatiusA · June 28, 2021, 12:32pm

Hi.

I want to use the swiper card as a menu for the top of my page, so select different views. I’m missing a couple of elements to make this work as I would wish, and I wonder if you have any pointers?

I’m using coverflow, but I’d like to be able to select a button regardless of whether that button is centred on the screen and jump to that page
because each view is its own URL, each view has its own instance of the swiper card, which means every time i switch to the view, the swiper card resets to button 1 rather than indicating the current page. Is it possible to somehow pass the view in as a parameter? (In image, the batteries page is selected, but it still shows as ‘Home’
I’m using a single include file for the menu)

( for my wall tablets I’m removing the title and side bars)

I’ve tried various parameters without success, but is it possible to make the menu properly rotate? ie, so that there is no absolute left or right of the list

Thanks in advance for all help.

AndrewsBrewing · June 29, 2021, 11:42am

I’m having the “t.setConfig is not a function” error too Matt. Did you ever get it fixed?

mattbruman · June 29, 2021, 11:53am

Nope, gave up on this card. I think it’s abandonware

Hellis81 · June 29, 2021, 12:01pm

Sorry, didn’t notice this.

No, still have not got it working.

milkplus · June 29, 2021, 5:32pm

Hi there. Am attempting to place an atomic-calendar-revive card inside a swiper-card but am struggling a little.

What I’m trying to do is lock the calendar card’s height so that it doesn’t take up too much space on my dashboard, and then I can scroll within the card to see all the events within a limited space. This works well using the card’s own cardHeight functionality.

However, once I place the calendar card inside a swipe card, it borks the formatting and ends up looking like the attached image. Anyone have any idea what I might be doing wrong?

Yaml is as follows:

type: 'custom:swipe-card'
parameters:
  scrollbar: null
  hide: false
  draggable: true
  snapOnRelease: true
  autoplay:
    delay: 7000
    disableOnInteraction: false
  speed: 1000
cards:
  - type: 'custom:atomic-calendar-revive'
    name: Upcoming
    enableModeChange: true
    entities:
      - entity: calendar.family
    firstDayOfWeek: 1
    maxDaysToShow: 60
    showDate: true
    showLocation: false
    showCurrentEventLine: false
    showMonth: true
    showDescription: false
    showProgressBar: false
    showWeekDay: true
    cardHeight: 100px

Kelvin · July 2, 2021, 5:09pm

Has anyone done anything with a media player card?

ASNNetworks · July 4, 2021, 2:31pm

Done what? Put a media player card inside swiper? I have. Nothing different than other cards.

Kelvin · July 4, 2021, 8:23pm

Yeah put media cards in to it.
I can’t get them to show.

ASNNetworks · July 4, 2021, 8:37pm

They work, all cards work inside swiper-card. I have nearly all cards you can think off, even nested cards within nested cards and conditional cards. Post your code so others can help you.

mkjustuk · July 12, 2021, 11:48am

I’ve read through almost all of this thread, but I couldn’t find the answer.

Can you set this card to auto-click the card in the middle? For instance, I have various ‘control types’ per room, I can swipe through, but would rather trigger the conditional cards for that room+control type without a click on the centred card when I stop swiping.

ASNNetworks · July 12, 2021, 11:55am

If you haven’t found the answer here, you should check out the API this card uses (Swiper API). It’s mentioned in the first post: http://idangero.us/swiper/api/

Unless someone already uses it like this, I don’t think you’ll find the answer in this thread. So in this case, you need to read the Swiper API docs and experiment with it.

mkjustuk · July 12, 2021, 3:56pm

Thanks, I have been through the API page but couldn’t find a mention of this type of option. I’ll go back through it and check I didn’t miss anything as it seems an obvious one to have.

ASNNetworks · July 12, 2021, 5:21pm

Perhaps you can create it with a workaround. I see in the API it supports hash options. Maybe you can tie a slide to a hash both ways. Using the hash opens the slide, but maybe you can also set it so opening the slide, it mentions the hash in the url.

Then you can create an automation with browser_mod. When the url (with hash) is open on that device, fire a call service (of the button in that slide). It’ll take a lot of work if it works though setting this up per slide/hash.

ampersandru · July 12, 2021, 9:31pm

anyone figure out why swiper card doesnt work with a simple entities list? Works fine with other complex types

homerum · July 26, 2021, 2:22am

This might be a reach, but does anyone know of a way to dynamically reorder the cards being displayed in swiper card?

I’m using swiper for climate entities and I’d like it to put the climate entity that’s currently on, at the front. Thanks.

homerum · July 26, 2021, 5:06am

I have tried this and it works. Perhaps post your card config.

jazzyisj · July 26, 2021, 5:24am

You can put your swipe cards in conditional cards or use the state switch. The state switch is much more flexible if your conditions are complex.

Here’s a working example from my config. One hint, order the cards backwards and set your start card to the last card. It jumps to the last card when the state switches.

Swipe in custom:state-switch example

  - type: custom:state-switch
    entity: template
    template: >
      {% if is_state('binary_sensor.notification_active','on') %} notify
      {% elif is_state('binary_sensor.commute_active','on')  %} commute
      {% else %} default
      {% endif %}
    default: default
    states:
      default:
        type: custom:swipe-card
        card_width: '98%'
        start_card: 2 # start with last cards so correct card displays when switching states
        reset_after: 120
        parameters: !include /config/lovelace/lovelace_swipe_parameters.yaml
        cards:
          - !include /config/lovelace/include/card/schedule/traffic_card.yaml

          - type: vertical-stack
            cards:
              - !include /config/lovelace/include/card/weather/weather_card.yaml
              - !include /config/lovelace/include/card/general/home_feed_card.yaml

      commute:
        type: custom:swipe-card
        card_width: '98%'
        start_card: 3 # start with last cards so correct card displays when switching states
        reset_after: 120
        parameters: !include /config/lovelace/lovelace_swipe_parameters.yaml
        cards:
          - !include /config/lovelace/include/card/general/home_feed_card.yaml
          - !include /config/lovelace/include/card/weather/weather_card.yaml
          - !include /config/lovelace/include/card/schedule/traffic_card.yaml

      notify:
        type: vertical-stack
        cards:
          - type: custom:swipe-card
            card_width: '98%'
            start_card: 3 # start with last cards so correct card displays when switching states
            reset_after: 120
            parameters: !include /config/lovelace/lovelace_swipe_parameters.yaml
            cards:
              - !include /config/lovelace/include/card/schedule/traffic_card.yaml
              - !include /config/lovelace/include/card/weather/weather_card.yaml
              - !include /config/lovelace/include/card/general/home_feed_card.yaml

jonaseymour · August 18, 2021, 3:32am

Thanks so much for this card. It’s a really great space saver.

1 question: I have a card that I want to default to the second card in the swipe list of 3 (middle card).
For most devices that I open the lovelace page on it works as expected. But for 1 device (a google nest hub max) it always defaults to the first card on a refresh, no matter what. Any idea why that might be?

yaml below for reference:

  - type: custom:swipe-card
    card_width: '90%'
    start_card: 2
    parameters:
      centeredSlides: true
      slidesPerView: 'auto'
      spaceBetween: 20
      scrollbar:
        hide: false
      navigation:
      keyboard:
        enabled: true
        onlyInViewport: true
    cards:
...

jesperB · August 19, 2021, 1:13pm

I get this t.setConfig is not a function error