Проблема с пагинацией и стрелками React swiper?

Question

[BludFIRE]

Мне нужно чтобы стрелки и пагинация выходила за рамки блока, дал абсолютную ширину и отступы, работает но при том случае когда дается .swiper-container overflow:visible; Но тут вылетают все блоки во всю ширину, надо как то их закрыть и чтоб пагинация и стрелки нормально смотрелись.

Это React Swiper

navigation
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
pagination={{ clickable: true }}
>

.swiper-pagination {
      position: absolute;
      bottom: -40px; // should be fine as is, but adjust to your liking
    }
    .swiper-button-prev{
      background: url("../public/img/arrow-next.svg");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      cursor: pointer;
      position: absolute;
      left:-40px;
    }

    .swiper-button-prev::after {
      display: none;
    }

    .swiper-container{
      overflow: visible;
    }
    .swiper-button-next{
      background: url("../public/img/arrow-prev.svg");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      cursor: pointer;
      position: absolute;
      right:-40px;
    }
    .swiper-pagination-bullet{
      background-color:#000;
    }

    .swiper-pagination-bullet-active{
      background-color:#fff;
    }

    .swiper-button-next::after{
      display: none;
    }