Move pagination outside a component in Slider React

Question

I have a problem trying to move a pagination bullet outside the slider, specifically below the slider image.

This is how I define the swiper.

<Grid container style={{ marginBottom: 115 }}>
      <Swiper
        spaceBetween={50}
        modules={[Navigation, Pagination]}
        navigation
        pagination
        breakpoints={{
          640: {
            slidesPerView: 1
          },
          1000: {
            slidesPerView: 2
          },
          1300: {
            slidesPerView: 4
          }
        }}
      >
        <div>
          {sliders.map((news) => (
            <SwiperSlide key={news.codigo}>
              <Sliders info={news} />
            </SwiperSlide>
          ))}
        </div>
      </Swiper>
    </Grid>

This is the css what I use for style the swiper

.swiper-button-next,
.swiper-button-prev {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.5);
  right: 0px;
  padding: 30px;
  color: rgb(0, 162, 255) !important;
  fill: rgb(0, 163, 255) !important;
  border-radius: 50% !important;
  border: solid rgb(255, 241, 241);
}

:root {
  --swiper-navigation-size: 26px;
}

.swiper-contrainer {
  overflow: visible;
}

.swiper-pagination {
  position: absolute;
  display: block;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 2;
  top:97%;
}

Here's how I got now, the pagination bullets need to got out of the green container

Answer 1

You can assign an element to be the pagination container by adding el parameter in pagination props and putting the container outside the slider. See the swiper document for detail.

Example:

   <Grid container style={{ marginBottom: 115 }}>
      <Swiper
        spaceBetween={50}
        modules={[Navigation, Pagination]}
        navigation
        pagination: {{
            el: '.swiper-custom-pagination',
          }},
        breakpoints={{
          640: {
            slidesPerView: 1
          },
          1000: {
            slidesPerView: 2
          },
          1300: {
            slidesPerView: 4
          }
        }}
      >
        <div>
          {sliders.map((news) => (
            <SwiperSlide key={news.codigo}>
              <Sliders info={news} />
            </SwiperSlide>
          ))}
        </div>
      </Swiper>
      <div className="swiper-custom-pagination"/>
    </Grid>