Custom navigation

[Fanreza]

in previous version 9 im customing navigation with this way

<swiper
  :slides-per-view="1"
  :navigation="{
	  nextEl: '.swiper-button-next',
	  prevEl: '.swiper-button-prev',
  }"
  :pagination="{ clickable: true }"
  :rewind="true"
  :create-elements="true"
  >
  <swiper-slide v-for="data in dataBanner">
	  <nuxt-img :src="data.imageUrl" :alt="data.title" format="webp" loading="lazy" />
	  <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
  </swiper-slide>
  
  <div class="swiper-button-next">
	  <Icon class="arrow" name="material-symbols:arrow-forward-ios-rounded" />
  </div>
  
  <div class="swiper-button-prev">
	  <Icon class="arrow" name="material-symbols:arrow-forward-ios-rounded" :rotate="2" />
  </div>
</swiper>

now in version 10

<swiper-container
    :slides-per-view="1"
    :navigation="{
	    nextEl: '.swiper-button-next',
	    prevEl: '.swiper-button-prev',
    }"
    :pagination="{ clickable: true }"
    :rewind="true"
    :create-elements="true"
    >
    <swiper-slide v-for="data in dataBanner">
	    <nuxt-img :src="data.imageUrl" :alt="data.title" format="webp" loading="lazy" />
	    <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
    </swiper-slide>
    
    <div class="swiper-button-next">
	    <Icon class="arrow" name="material-symbols:arrow-forward-ios-rounded" />
    </div>
    
    <div class="swiper-button-prev">
	    <Icon class="arrow" name="material-symbols:arrow-forward-ios-rounded" :rotate="2" />
    </div>
</swiper-container>

its showing the swiper-button-next and prev rendered inside swiper-wrapper and not outside it like swiper-navigation and make the navigation not relative to the swiper-container, i manage to fix it by using slot="container-end" in each swiper-button but is there a better way?