Swiper的橫向輪播圖一般都是鋪滿寬度展示的，App最近開始流行左右各有部分圖片出現(xiàn)的效果，用Swiper也可以實(shí)現(xiàn)。

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, // 用戶操作后，不停止自動(dòng)切換
  }, // 自動(dòng)播放
  loop: true, // 循環(huán)播放,
  slidesPerView: 'auto', // 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量
  centeredSlides: true, // active slide 居中
  pagination: {
    el: '.swiper-pagination',
  },
})
</script>

• 重點(diǎn)就是CSS里的.swiper-wrapper寬度設(shè)置以及JS里的slidesPerView 和 centeredSlides 設(shè)置