How to use custom navigation on webcomponent swiper?

[fdverwoerd]

The webcomponent documentation says there are only 2 parts, swiper-container and swiper-slide. But In 'normal' swipers you wrap the slides inside .swiper-wrapper div.

How can I add custom navigation and make sure the navigation is not part of the 'slides' div? What am i missing?

<div class="location-swiper-wrapper">
    <swiper-container ref="locationSwiper" slides-per-view="4" speed="500" loop="true" css-mode="true" :space-between="20" :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }">

      <swiper-slide v-for="location in locations">
        <div class="location-card" :class="{'active-location': location.visibility}">
          <h3>{{location.title}}</h3>
          <a :href="location.url" class="button theme-6 type-solid size-normal">Ontdek locatie</a>
        </div>
      </swiper-slide>

      ... If put it here the arrows work but its part of the slides wrapper?


    </swiper-container>
    <div class="chevron-navigation">
      <button class="swiper-button-prev">
        <svg><use href="#svg_chevron_left"></use></svg>
      </button>
      <div class="chevron-pagination"></div>
      <button class="swiper-button-next">
        <svg><use href="#svg_chevron_right"></use></svg>
      </button>
    </div>
  </div>

[richardaubin]

https://swiperjs.com/element#parameters-as-attributes

<swiper-container 
   ref="locationSwiper" 
   slides-per-view="4" 
   speed="500" 
   loop="true" 
   css-mode="true" 
   space-between="20" 
   navigation-next-el=".swiper-button-next" 
   navigation-prev-el=".swiper-button-prev">

Based off the docs, it should probably work with something like the above... Haven't tried it.