How can I change the width of the slides in swiperjs using slidesPerview?

I'm trying to get my swiper to look like this, with the active slide centered and the previous and next slide showing a little bit on the side.

However, I don't know how can I change the width of the slides and keep the slides centered

https://codesandbox.io/s/empty-wind-yxj67v?file=/index.html

.box {
  max-width: 1440px;
  display: flex;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.box .banner-swiper {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.box .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.box .swiper-wrapper .prev-slide,
.box .swiper-wrapper .next-slide {
  opacity: 0.4;
}
.box .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .swiper-slide {
  width: 1000px;
}
.box .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box .navigation {
  display: block;
  position: absolute;
  width: 120px;
  height: 56px;
  z-index: 50;
  bottom: 16px;
  right: 236px;
}
.box .navigation .previous {
  margin-right: 8px;
}
.box .navigation .previous,
.box .navigation .next {
  width: 56px;
  height: 56px;
  background-color: #424142;
}
.box .navigation .previous i,
.box .navigation .next i {
  color: white;
}