在vue中使用swiper4.x
需求轮播图左右两边含有上一张和下一张的一部分
实现代码：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.实现好的样式
版权声明：本文为cb1490838281原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。