My navigation and pagination components are disappearing

[Salar-Sali]

Hello everyone!
I customized the navigation and pagination and they become like the attached picture, I am changing the width of the screen and when the width becomes more than 1280px, the navigation and pagination are disappearing for unknown reasons, when i refresh the page while the width is more than 1280px, they come back.
This is my code for the navigation:
<div className="swiperNavPrev flex justify-center items-center w-9 h-9 bg-blue-600 rounded" ref={swiperNavPrevRef} > <SVGArrowLeft className="w-6 h-6 fill-white "></SVGArrowLeft> </div>
navigation={{ prevEl: ".swiperNavPrev", nextEl: ".swiperNavNext", }}

Does anyone know how i can get rid of this strange behavior?
Thanx in advance

[TonyCh55]

same problem

[Salar-Sali]

Hi!
i have done the following and it has been solved.

1. Wrapped my swiper with <div className="slider-wrapper">
2. I made new elements for the pagination and navigation:

<div  className="prev"  >
<div  className="next"  >
<div  className="pagination"  > 

Their definition in the swiper is as follows:

pagination={{ el: ".pagination", clickable: true }}
navigation={{
          prevEl: ".prev",
          nextEl: ".next",
        }}

I hope this will be helpful for you

[Salar-Sali]

In addition, i have put all my elements (Swiper, pagination, and navigation) inside <div className="slider-wrapper">