脚本宝典收集整理的这篇文章主要介绍了vue.js怎么用swiper,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue.js中使用swiPEr的方法:首先下载【swiper.js】;然后在【main.js】中全局引入【swiper.js】;最后在模板中配置相关内容即可。
【相关文章推荐:vue.js】
vue.js中使用swiper的方法:
1、下载swiper.js
npm install vue-awesome-swiper --save
2、在main.js中全局引入swiper.js
import VueAwesomeSwiper From 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)
3、在模板中配置相关内容
<template> <swiper :options="swiperOption"> <swiper-slide v-for="ITem in imglist"> <img :src="rootLink+ '/resources/img/' + item.imgPath"/> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> import axios from 'axios' export default { name: 'carrousel', data() { return { rootLink: 'http://119.23.28.239:8080', imglist:[], swiperOption: { autoplay: 3000, //l轮播间隔时间 loop: true, //是否自动轮播 pagination : '.swiper-pagination', //轮播图中下标点显示 paginationClickable :true //轮播图中下标点显示 } } }, mounted() { VAR vm = this; axios.get(vm.rootLink + '/train/homePage/banner?type=上面') .then(function (data) { vm.imglist = data.data.data }) } } </script>
相关免费学习推荐:JavaScript(视频)
以上就是vue.js怎么用swiper的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue.js怎么用swiper全部内容,希望文章能够帮你解决vue.js怎么用swiper所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。