reactjsswiper.jsreact-swiper

swiper-button outside container in react

how can I make swiper nav outside the container in react js?

enter image description here

to

enter image description here

Solution

  • you can use this

    method 1

    //add custom btns in some inner comp
 <i className="icon-arrow-long-right review-swiper-button-next"></i>
 <i className="icon-arrow-long-left review-swiper-button-prev"></i>

    and next in swiper comp

    <Swiper
    navigation={{
      nextEl: '.review-swiper-button-next',
      prevEl: '.review-swiper-button-prev',
    }}
 >
  </Swiper>

    or you use this way

    method 2

    // some-inner-component.jsx
import { React } from 'react';
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

    more in info : https://swiperjs.com/react#use-swiper

    enjoy ;)