在vue中使用swiper,vue轮播图插件vue-awesome-swiper
参考官方文档:https://github.com/surmon-china/vue-awesome-swiper附上 swiper 中文网:https://www.swiper.com.cn/1.npm安装npm install vue-awesome-swiper --save2在main.js中引入import VueAwesomeSwiper from 'vue-awesome...
·
参考官方文档:https://github.com/surmon-china/vue-awesome-swiper
附上 swiper 中文网:https://www.swiper.com.cn/
1.npm安装
npm install vue-awesome-swiper --save
2在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3还可以参考官方文档的demo文件
// 附上官方demo文档地址
https://github.com/surmon-china/vue-awesome-swiper/tree/master/examples
4 个人代码参考
index.vue的内容
//
<div class="swiper-container">
<md-card>
<md-card-media>
<swiper :options="swiperOption">
<swiper-slide>
<img src="../../images/figure_1.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_2.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_3.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_4.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_5.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_6.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_7.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_8.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_9.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_10.png" alt>
</swiper-slide>
<swiper-slide>
<img src="../../images/figure_11.png" alt>
</swiper-slide>
</swiper>
</md-card-media>
</md-card>
</div>
//我实现的是官方文档110的类型轮播图
index.vue的css样式
//采用的是scss,r()是自己封装的一个函数
.agent-swiper {
width: 100%;
color: #666666;
padding-top: r(29px);
background-color: #fff;
h2 {
font-size: r(30px);
padding: r(25px) r(30px);
box-sizing: border-box;
margin-bottom: r(25px);
}
.swiper-container {
width: 100%;
height: r(330px);
.swiper-slide {
width: r(195px);
height: r(330px);
margin-right: 0;
}
}
.swiper-bottom {
height: r(80px);
line-height: r(30px);
text-align: center;
color: #1898ff;
margin-bottom: 0;
font-weight: normal;
font-size: r(24px);
}
}
js api参数 重点
export default {
data() {
return{
//轮播图的api
swiperOption: {
slidesPerView: 4, //这个表示父盒子的宽度放下几个子盒子slide
spaceBetween: 0, //表示子盒子与子盒子之间的距离(slide之间的距离)
pagination: {
el: ".swiper-pagination", //官网api参数写在这里
clickable: true
}
},
}
},
}
5最终效果
主要做的是滑动的轮播图,后面有十一张图片
更多推荐
已为社区贡献6条内容
所有评论(0)