码迷,mamicode.com
首页 > 其他好文 > 详细

angular2----使用swiper做轮播图

时间:2017-09-19 14:46:19      阅读:1601      评论:0      收藏:0      [点我收藏+]

标签:技术分享   z-index   最新   初始化   alt   copy   mmm   http   样式   

步骤:

1、去官网下载最新的swiper的js和css 分别在index页面中导入

技术分享

 

 2.在需要做轮播的页面引入

 技术分享

 

3.然后我就打开swiper的API文档了,直接copy,初始化一个swiper

技术分享

当然在angular2中不能这么写,于是变成了这样

在html中

技术分享

 

 在相关的ts中

技术分享

emmm.... 本来我以为这样就好了 然后发现尼玛左右侧按钮和下面的分页按钮出不来!

于是又看了一个分页的API  发现需要把分页css也copy ,放进相应的css文件夹中的时候,以为ok了,运行,还是么有看到!

打开调试工具看了下分页样式,样式都么有覆盖上去,么得办法 我把样式转移到index.html中

技术分享

再运行,还是没有!!!

再次打开调试工具,样式是写上去了,但是好像层级不够 遇上分别给左右侧按钮和分页按扭加上z-index:10 

好了  结束了 ok了  能看见了

angular2----使用swiper做轮播图

标签:技术分享   z-index   最新   初始化   alt   copy   mmm   http   样式   

原文地址:http://www.cnblogs.com/maochunyan/p/7550988.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!