React pagination controller overlaps with the swiper wrapper

[emilioSp]

• Swiper Version: 6.4.15

What You Did

Hey 👋

I'm struggling to understand how the pagination works in React.
I'm trying to move out of the wrapper the pagination controller to avoid the ugly overlap that you can see in
https://codesandbox.io/s/swiper-react-fork-forked-4ujyh?file=/src/App.js

I'm thinking to change the swiper-container switching all the classes to the flexbox model and override the position: absolute of the pagination which causes the ugly overlap.

I'm feeling like what I'm doing is a dirty hack. Is it possible that there isn't a simpler way??? (I don't want to use css min-height because I need that the component is responsive).
Why the swiper container doesn't use the flexbox model instead of rely on the position: absolute css rule?
Where am I going wrong?

Expected Behavior

The pagination controller doesn't overlap with the swiper wrapper

Actual Behavior

The pagination controller overlaps with the swiper wrapper

[nolimits4web]

If you need to move it outside then create custom <div class="swiper-pagination"></div> and pass its CSS selector to pagination.el element.

Or just add padding-bottom to .swiper-container element.

[emilioSp]

I'm sorry, I didn't understand how to move the pagination out of the container with React.

I tried with

<Swiper
        slidesPerView={1}
        pagination={{
          el: ".swiper-pagination",
          clickable: true
        }}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
      >

[...]

without success

[nolimits4web]

And where is your custom element you are referring in el: ".swiper-pagination"? You should add <div class="swiper-pagination"> where you need it

[emilioSp]

Ok, it was a problem with the refresh. Now it works. Tnx!

[ManigandanRaamanathan]

@nolimits4web I tried but its still not displaying. Could you please share a demo via codesandbox?