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;
}