Positioning button in SwiperJs in react

user_16664721 0
Viewed 58

I am looking for ways to position the navigation buttons shown in this demo such that the buttons are on the outside of the swiper component like shown in the image below. Does any know how to do this? enter image description here

swiper.js tailwind-css reactjs css
1 Answers

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>
    </>
  );
}
user_196170750
Related