Navigating outside of Swiper

[kaboume]

Hi, 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>

[kaboume]

No help ?

[milelazar]

Have you tried to place swiper-button-prev and swiper-button-next divs outside of Swiper It should search for these dom elements anywhere on the page. Not just within the Swiper component.

I am using vanilla swiper without nuxt-swiper module and it works for me.

[kaboume]

@milelazar : thank you ! It works well.