[MainUI] Custom Widget for horizontal Scrolling

[SHUred]

Hi there,
maybe im “thinking too complex” but is there a way to have a Widget on Main UI which contains multiple widges in an horizontal arrangement and is continuously scrollable horizontally?

Im Using openHAB 3.2.0

The Swiper Widget comes very close, but i would like to have a “spaceless arrangement” of multiple widgets next to each other
This means, that in the default configuration e.g. 1,5 widgets are visible
(The swiper-widget always shows only one of the configured contained widgets)

In my special case:
I would like to have a single row for all my webcam widgets where each and every picture is directly besides the previous
All the webcam widgets have exactly the same size, thats why i think it would look good if i have one single row for all these similar widgets and can easyily and quickly scroll horizontally through these widgets

Thanks

[SHUred]

OK now i found this

“Auto Slides Per View + Centered”
at
Swiper Slider | Framework7 Documentation

Looks promising to me
If anyone has any good practices feel free to tell me

[SHUred]

Is there an easy way to add the options
data-slides-per-view="auto"
data-centered-slides="true"

to the
oh-slider ?

oh-slider - Slider

Basically thats all i wanted to do
But i guess i have to create a custom widget for that?

[SHUred]

Basically it comes down to exactly this:

Swiper Demos

I created a Ticket at GitHub to just add these options to the OH-swiper by default
[oh-swiper slider] Add options “slides-per-view” and “centered-slides” · Issue #1389 · openhab/openhab-webui (github.com)

[SHUred]

Here i created a f7-swiper with two slides
In the first step i want to achieve that i can show multiple slider per view with the “slides-per-view” option
But it doesnt work
Also “slidesPerView” does not work
Is this even possible or do i have to go down another path to achieve

• slides-per-view: auto
• centered-slides: true

uid: SwiperAutoCenter
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 13, 2022, 7:18:35 PM
component: f7-swiper
config:
  pagination: true
  slides-per-view: 2 <<<< THIS DOES NOT WORK
slots:
  default:
    - component: f7-swiper-slide
      slots:
        default:
          - component: oh-button
            config:
              text: test1
          - component: oh-button
            config:
              text: test2
    - component: f7-swiper-slide
      slots:
        default:
          - component: oh-button
            config:
              text: test3
          - component: oh-button
            config:
              text: test4

[JustinG]

Looks like you have to put the slidesPerView in the params object.

component: f7-swiper
config:
  pagination: true
  params: 
    slidesPerView: 2

[SHUred]

Never heard about the params-section but its working!
Thank you very very much!
Made my day