Estoy tratando de hacer que mi swiper se vea así, con la diapositiva activa centrada y la diapositiva anterior y la siguiente mostrando un poco al costado.

Sin embargo, no sé cómo puedo cambiar el ancho de las diapositivas y mantenerlas centradas.

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