position navigation arrows in react

[ghost]

I have read some comments that for standard swiper slider using html you can place the navigation divs outside of the container etc. but I don't think this is possible in React because you don't actually use markup to place the arrows, you just add 'navigation' prop to your component. By default the arrows sit in the centre but I actually want them underneath the swiper. Any ideas?

<Swiper
 navigation
 spaceBetween={50}
slidesPerView={1}
>

[Jubayer05]

Hi @Jonofat
I'm facing the same issue. If you got any idea to solve the issue please let know the community.

[rsbrowne]

So this is really easily done. What you need to do is create your buttons and give them a previous and next class, so in my case it was something like className="prevButton" and className="nextButton". Then what you do is you pass these classes through the navigation prop like this:

navigation={{
  prevEl: '.prevButton',
  nextEl: '.nextButton',
}}

Then just style as normal. It's worth noting I am using V6 so this may not work if you're using V7 but I have my buttons outside of my Swiper component and they work fine. Hopefully that helps!

[xdnzz]

for some reason i tried it but i didnt work a few days ago. and Now i did and it just worked fine(?).
Thx tho!

[ghost]

Apologies for the delay on this one. I ended up doing the below. <Reviews> is basically my component with the swiper in

            <Col xl={8} className="d-flex align-items-stretch">
              <Reviews reviews={reviews.reviews} />
            </Col>
            <div className={styles.nav_container}>
              <button type="button" className="swiper-navigation-prev"></button>
              <button type="button" className="swiper-navigation-next"></button>
            </div>

    <Swiper
       pagination={false}
       loop={true}
       autoplay={{
         delay: 9000,
         disableOnInteraction: false,
       }}
       className="mySwiper"
     >

Hope this helps!

[xdnzz]

Hi! which version of Swiper are you using? iam facing the same issue but i cant find a way to fix it. Even with the answers above, i still couldnt fix mine

[xdnzz]

nevermind, i fixed it!