title: How can I change the width of the slides in swiperjs using slidesPerview?
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/4zCcE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zCcE.jpg" alt="enter image description here" /></a></p>
  <p>However, I don't know how can I change the width of the slides and keep the slides centered</p>
  <p><a href="https://codesandbox.io/s/empty-wind-yxj67v?file=/index.html" rel="nofollow noreferrer">https://codesandbox.io/s/empty-wind-yxj67v?file=/index.html</a></p>
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  
  </code></pre>