oh-repeater does not work correctly to populate f7-swiper-slides in f7-swiper

[DrRSatzteil]

The problem

I try to use the oh-repeater to populate a f7-swiper component with f7-swiper-slides (with fragment = true). Excerpt here, see full example below:

                      - component: f7-swiper
                        config:
                          scrollbar: true
                          params:
                            slidesPerView: 1
                            direction: vertical
                          style:
                            width: 100%
                            height: 100%
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: item
                                in: =props.grouptogglearray.split("|")
                                fragment: true
                              slots:
                                default:
                                  - component: f7-swiper-slide
                                    slots:
                                      default:

However, the resulting swiper does not work correctly because it only recognises one single element. By swiping and in the DOM tree I can see however that all components have been added by oh-repeater as expected. As soon as you resize the browser window the different f7-swiper-slides are recognised and the swiper works as expected. Please also note that resizing does not help when using a oh-swiper instead of an f7-swiper.

I assume that the problem is that the swiper has already been initialised when oh-repeater populates the parent container. I'm not aware of a manual way of initialising the parent

In the attached GIF I try to swipe a couple of times, resize the window, and the scrollbar appears:

Expected behavior

The behavior shown after resizing the browser window is expected.

Steps to reproduce

Use example below (set reparray to: test|test2|test3):

uid: repeater_bug
tags: []
props:
  parameters:
    - description: Repeater Array
      label: Repeater Array
      name: reparray
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 23, 2021, 11:46:14 PM
component: f7-card
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-swiper
            config:
              scrollbar: true
              params:
                slidesPerView: 1
                direction: vertical
              style:
                width: 200px
                height: 200px
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: repeat
                    in: =props.reparray.split("|")
                    fragment: true
                  slots:
                    default:
                      - component: f7-swiper-slide
                        slots:
                          default:
                            - component: f7-col
                              config:
                                class:
                                  - display-flex
                                  - flex-direction-column
                                  - align-items-center
                              slots:
                                default:
                                  - component: f7-block-title
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            text: =loop.repeat

Your environment

runtimeInfo:
  version: 3.0.0
  buildString: Release Build
locale: de_DE
systemInfo:
  configFolder: /openhab/conf
  userdataFolder: /openhab/userdata
  logFolder: /openhab/userdata/logs
  javaVersion: 11.0.9
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu11.43+21-CA
  osName: Linux
  osVersion: 5.4.0-62-generic
  osArchitecture: amd64
  availableProcessors: 4
  freeMemory: 582883280
  totalMemory: 836763648
bindings:
  - allplay
  - astro
  - chromecast
  - exec
  - http
  - icalendar
  - kodi
  - magentatv
  - miio
  - network
  - ntp
  - shelly
  - snmp
  - spotify
  - telegram
  - tplinksmarthome
  - unifi
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: false
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    pixelRatio: 1
    prefersColorScheme: light
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: 8
    hardwareConcurrency: 6
    language: de-DE
    languages:
      - de-DE
      - de
      - en-US
      - en
    onLine: true
    platform: Linux x86_64
  screen:
    width: 1920
    height: 1080
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: filled
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
timestamp: 2021-01-23T22:51:29.755Z

Browser console

No relevant entries/no errors

Browser network traffic

Nothing interesting there

Additional information

[DrRSatzteil]

Just noted that the swiper is initialised correctly when I:

1. Place the component in a f7-card (I had that done that before)
2. Use an expression to set the card footer (when I use just plain text the swiper is not correctly initialised)

Maybe this helps tracking down the problem.