Ersten sichtbaren Index bei f7-swiper festlegen?

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

Ersten sichtbaren Index bei f7-swiper festlegen?

Beitrag von ma37c4 »

Hallo widget (OH3) Programmierer,

bin gerade dabei mich mit dem Thema:
f7-swiper > oh-repeater > f7-swiper-slide
auseinanderzusetzen.

Weis jemand wie man z.B. bei 50 Elementen den ersten sichtbaren Index auf 10 einstellt?

initalSlide hat leider keine Auswirkung.

Swiper-Defs:
https://v4.framework7.io/vue/swiper
https://swiperjs.com/swiper-api#parameters

Zum Testen benötigt man ein Item für die Soll-Temperatur:

Code: Alles auswählen

uid: H-Test
tags: []
props:
  parameters:
    - context: item
      label: Soll Temperatur (number)
      name: itemTempSet
      required: true
      type: TEXT
      groupName: mainItems
  parameterGroups:
    - name: mainItems
      label: Items
timestamp: Oct 1, 2022, 6:31:44 PM
component: f7-card
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    text: =Number(items[props.itemTempSet].state.split(' ')[0])
                    style:
                      font-size: 50px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-swiper
                  config:
                    params:
                      initialSlide: =Number(items[props.itemTempSet].state.split(' ')[0])
                      breakpoints:
                        "0":
                          slidesPerView: 1
                        "120":
                          slidesPerView: 2
                        "240":
                          slidesPerView: 3
                        "600":
                          slidesPerView: 5
                        "720":
                          slidesPerView: 7
                        "1200":
                          slidesPerView: 9
                        "1440":
                          slidesPerView: 11
                        "1680":
                          slidesPerView: 13
                        "1920":
                          slidesPerView: 15
                        "2160":
                          slidesPerView: 17
                        "2400":
                          slidesPerView: 19
                        "2640":
                          slidesPerView: 21
                        "2880":
                          slidesPerView: 23
                      touchRatio: 1.5
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          sourceType: range
                          for: iT
                          rangeStart: 4.5
                          rangeStop: 30.5
                          rangeStep: 0.5
                          fragment: true
                        slots:
                          default:
                            - component: f7-swiper-slide
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      class:
                                        - no-padding
                                        - no-margin
                                      text: =loop.iT.toString()
                                      active: false
                                      action: command
                                      actionItem: =props.itemTempSet
                                      actionCommand: =loop.iT
                                      style:
                                        --f7-button-border-width: "=(Number(items[props.itemTempSet].state.split(' ')[0]) === loop.iT ? '2px' : '0px')"
Ich wüsste auch nicht wie diese Methode (evtl. über styles?) eingebunden werden könnte:
swiper.slideTo(index, speed, runCallbacks)
z.B. (loop.iT === 10 ? swiper.slideTo(10, 300, false))

lg
Matthias

Antworten