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

小魏的马仔

于 2016-08-09 16:30:34 发布

阅读量9.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic 文章标签：图片 ionic 样式 css 轮播

本文链接：https://blog.csdn.net/xuexiiphone/article/details/52163897

ionic 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何通过CSS修改ion-slide-box中的图片大小、分页指示器的位置及样式，包括颜色和间距调整，以达到理想的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现图片轮播

具体实现方式，请参照我上一篇文章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文件进行重写就行。