首页 > 其他 > 详细

在vue中使用swiper4.x

时间:2018-09-14 19:38:06      阅读:187      评论:0      收藏:0      [点我收藏+]

需求技术分享图片轮播图左右两边含有上一张和下一张的一部分

实现代码: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" ></div>
<div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" ></div>
<div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" ></div>
<div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" ></div>
<div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" ></div>
<div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" ></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.实现好的样式技术分享图片

 

 
 
 

 

在vue中使用swiper4.x

原文:https://www.cnblogs.com/cb1490838281/p/9648102.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!