您的位置：首页 > Web前端 > CSS

ionic之ion-slide-box实现图片轮播样式修改

2016-08-09 16:30 531 查看

实现图片轮播

具体实现方式，请参照我上一篇文章http://blog.csdn.net/xuexiiphone/article/details/52163822

本篇主要讨论内容为：

如何修改ion-slide-box的相关样式

样式代码

css代码–修改图片大小

.box {
width: 100%;
height: 200px;
}


css代码–修改page小圆点位置

.slider-pager {
position: absolute;
bottom: 20px;
width: 98%;
height: 5px;
text-align: center;
}


css代码–修改page小圆点样式以及颜色

.slider-pager .slider-pager-page {
display: inline-block;
margin: 0px 3px;
width: 12px;
color: white;
text-decoration: none;
opacity: 0.3;
font-size: 10px;
}


效果

原来黑色的按钮变为白色，间距也做了略微的调整。



后记

更多的修改，可以在浏览器中点击F12查看具体的样式，然后再ionic项目中的css文件进行重写就行。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  图片 ionic 样式 css 轮播
相关文章推荐
新的分享
章节导航