Oh-swiper Navigation formatting

Add-ons UIs
1

Hi,
I’m building a widget with oh-swiper for a room selector, but I’d like to be able to change the navigation “arrows” colour, etc.
Is that possible?
Currently have large orange arrows, which I don’t like:
image
Basic component with “fancy stuff” removed:

    - component: oh-swiper
      config:
        observer: true
        observeParents: true
        observeSlideChildren: true
        navigation: true
      slots:
        default:
          - component: oh-button
            config:
              action: popover
              actionModal: widget:Hall
              text: Hall
              style:
                color: white
          - component: oh-button
            config:
              action: popover
              actionModal: widget:Lounge
              text: Lounge
              style:
                color: white

Thanks,
Richie

2 
component: oh-swiper
config:
  observer: true
  observeParents: true
  observeSlideChildren: true
  navigation: true
  style:
    --swiper-navigation-color: rgba(0,255,0,1)
    --swiper-navigation-size: 100px
slots:
  default:
    - component: oh-button
      config:
        action: popover
        actionModal: widget:Hall
        text: Hall
        style:
          color: white
    - component: oh-button
      config:
        action: popover
        actionModal: widget:Lounge
        text: Lounge
        style:
          color: white
3

Hi,
Thank, I’ll try that out tonight.
Where did you find the documentation for that, as I struggled to find anything useful?

Richie

4

Check out the documentation of swiper.js: Swiper API

You can use the swiper.js config parameters you will find in the documentation in the

config:
  params:

sections.

Example:

                - component: f7-swiper
                  config:
                    params:
                      slidesPerView: 1
                      initialSlide: 1
                      spaceBetween: 40
                      scrollbar:
                        el: .scrollbar-container
                        hide: true

Regarding the CSS styles I think you must check out the actual CSS files. The documentation I linked above will tell you which file is used for which component (see style section of Swiper API).