Navigation outside of Swiper

[kaboume]

Hi,
I'm using the Nuxt Js module of Swiper.
The navigation arrows are superimposed on the left and right slides.
Is it possible to put the navigation outside of the Swiper ?

<Swiper
          :modules="[SwiperNavigation, SwiperGrid]"
          :slidesPerView="1"
          :slidesPerGroup="1"
          :breakpoints="breakpoints"
          :loop="true"
          :navigation="{
            enabled: true,
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }"
        >
          <SwiperSlide
            v-for="(groupe2Podcasts, index) in podcastsGroupesParDeux"
            :key="`podcastSlideStories${index}`"
          >
            <div class="d-flex flex-column justify-center align-center">
              <v-img
                :src="groupe2Podcasts[0].data.url.thumbnail_url"
                width="100%"
                cover
                :alt="groupe2Podcasts[0].data.url.title"
                :title="groupe2Podcasts[0].data.url.title"
                class="mb-5"
              />
            </div>
          </SwiperSlide>

          <div class="swiper-button-prev">
            <img src="/slider-fleche-gauche.svg" style="width: 10px" />
          </div>
          <div class="swiper-button-next">
            <img src="/slider-fleche-droite.svg" style="width: 10px" />
          </div>
        </Swiper>

[mafterr11]

Any solutions?

[kaboume]

You have to put the swiper buttons outside the swiper component.