本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来vue2.0使用swiper实现轮播广告,vue2.0使用swiper实现轮播广告的注意事项有哪些,下面就是实战案例,一起来看一下。1、安装swiper
1 | npm install swiper@3.4.1 --save-dev
|
2、引用组件
1 2 | import Swiper from 'swiper' ;
import 'swiper/dist/css/swiper.min.css' ;
|
3、html页面代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | <p class = "swiper-container" id= "swiper" >
<p class = "swiper-wrapper" >
<p class = "swiper-slide" v- for = "(item,$index) in detail.imgs" >
<a v-on:click= "showPreview($index,detail.imgs,swiperObj)" >
<figure class = "wp-avatar banner" >
<img v-cloak :src= "item | toQiNiuImg" />
</figure>
</a>
</p>
</p>
<!-- Add Pagination -->
<p class = "swiper-pagination" ></p>
</p>
|
4、初始化组件,并设置参数
阅读剩余部分
相关阅读 >>
react中swiper插件如何使用?
vue.js怎么用swiper
vue2.0使用swiper实现轮播广告
vue2.0非父子组件间怎么进行通讯?
swiper的基本使用
vue3.0和vue2.0的区别是什么?
更多相关阅读请进入《vue2.0》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue2.0使用swiper实现轮播广告