在vue中使用swiper4.x

需求 ：實現一個左右兩邊有邊距的輪播圖vue+swiper4

    輪播圖左右兩邊含有上一張和下一張的一部分

     先安裝swiper：

     1.npm install swiper 安裝swiper

  2.在入口文件main。js引入 import "swiper/dist/css/swiper.min.css";

     3.在你需要實現輪播的模塊注冊： import Swiper from "swiper";

     4.在template中寫好結構：

   　　　<!-- 輪播 -->

　　　　<div class="swiper-container">

　　　　　　<div class="swiper-wrapper">

　　　　　　　　<div class="swiper-slide"><img class="img_c1" src="../../images/family/選項框.png" alt=""></div>

　　　　　　　　<div class="swiper-slide"><img class="img_c1" src="../../images/family/選項框.png" alt=""></div>

　　　　　　　　<div class="swiper-slide"><img class="img_c1" src="../../images/family/選項框.png" alt=""></div>

　　　　　　　　<div class="swiper-slide"><img class="img_c1" src="../../images/family/選項框.png" alt=""></div>

　　　　　　　　<div class="swiper-slide"><img class="img_c1" src="../../images/family/選項框.png" alt=""></div>

　　　　　　　　<div class="swiper-slide"><img class="img_c1" src="../../images/family/選項框.png" alt=""></div>

　　　　　　</div>

　　　　　　<!-- Add Pagination -->

　　　　　　<div class="swiper-pagination"></div>

　　　　</div>

 

　　5.在鈎子函數mounted（）{}中做配置：

　　　　var swiper = new Swiper(".swiper-container", {

　　　　　　slidesPerView: 1.36,

　　　　　　centeredSlides: true,

　　　　　　spaceBetween: 30,

　　　　　　pagination: {

　　　　　　el: ".swiper-pagination",

　　　　　　clickable: true

　　　　　　}

　　　　});

　　6.最終實現好的樣式：