Swiper轮播图不全屏展示

Swiper的横向轮播图一般都是铺满宽度展示的，App最近开始流行左右各有部分图片出现的效果，用Swiper也可以实现。

swiper.gif

/*css 样式*/
    .swiper-wrapper {
      width: 80%;
    }
    .swiper-slide-prev,
    .swiper-slide-next {
      transform: scale(0.85)
    }

 <!-- HTML -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide box1"></div>
      <div class="swiper-slide box2"></div>
      <div class="swiper-slide box3"></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </div>

<!-- js -->
<script>
var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    disableOnInteraction: false, // 用户操作后，不停止自动切换
  }, // 自动播放
  loop: true, // 循环播放,
  slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量
  centeredSlides: true, // active slide 居中
  pagination: {
    el: '.swiper-pagination',
  },
})
</script>

• 重点就是CSS里的.swiper-wrapper宽度设置以及JS里的slidesPerView 和 centeredSlides 设置