Ionic 2 - 幻灯片如何改变分页进度颜色？

Question

我设置了paginationStyle="progress"的幻灯片，如何更改进度条的颜色？

<ion-slides #exercisesSlider pager paginationType="progress">

有人可以为我提供一种改变进度条颜色的方法吗？

Answer 1

Ionic使用Swiper API幻灯片。因此，您可以选择使用类名swiper-pagination-progress和swiper-pagination-progressbar，如下所示：

.swiper-pagination-progress .swiper-pagination-progressbar {
  background:red;
}

Answer 2

来自@Surya Teja的回答很简单，也许很明显。如果您将类分开，则可以控制进度条每个部分的颜色。

.swiper.pagination-progress {
    background-color: red
}
.swiper-pagination-progressbar {
    background-color: white
}

Answer 3

只使用 CSS 边框对我有用：

.swiper-pagination-progressbar-fill {
  border: 2px solid rgba(175, 240, 122, 0.719);
  border-radius: 5px;
}

.swiper-pagination-progressbar {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}