I am looking for ways to position the navigation buttons shown in this

CodePudding user response：

Use onSwiper prop to get your swiper instance and save it with useState hook. With that you can do whatever you like according to swiper api. Have fun with coding.

export default function App() {
  const [swiperRef, setSwiperRef] = useState(null);

  const prevHandler = () => {
    swiperRef.slidePrev();
  };

  const nextHandler = () => {
    swiperRef.slideNext();
  };

  return (
    <>
      <button onClick={prevHandler}>Prev</button>
      <button onClick={nextHandler}>Next</button>
      <Swiper spaceBetween={50} onSwiper={(swiper) => setSwiperRef(swiper)}>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </>
  );
}