Question

我的intro-page.scss中有此代码，在这里我应该能够更改离子弹的颜色，但它不起作用

.swiper-pagination-bullet {
   background: #37469B;
}

.swiper-pagination-bullet-active {
    width: 12px;
    height: 12px;
    background: transparent;
}

Answer 1

尝试一下：

:host ::ng-deep .swiper-pagination{
    bottom: 10%;
    .swiper-pagination-bullet {
        --bullet-background: #000000;
        width: 20px ;
        height: 20px ;
    }

    .swiper-pagination-bullet-active {
        width: 20px ;
        height: 20px ;

    } 
}

Answer 2

使用：项目符号背景和项目符号背景激活

https://ionicframework.com/docs/api/slides#css-custom-properties

Answer 3

.swiper-pagination-bullet {
  --bullet-background: #37469B;
}

.swiper-pagination-bullet-active {
    width: 12px;
    height: 12px;
   --bullet-background: transparent;
}

如果您有任何问题，这应该可以发表评论:)

如何更改离子滑块的颜色和大小

3 个答案: