需求 ：實現一個左右兩邊有邊距的輪播圖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.最終實現好的樣式：

?

?

?

轉載于:https://www.cnblogs.com/cb1490838281/p/9648102.html

總結

以上是生活随笔為你收集整理的在vue中使用swiper4.x的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。