How to change color and size of ionic slider

Question

I have this code in my intro-page.scss where I should be able to change the color of my ionic bullets but it is not working

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

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

Answer 1

Try this:

: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

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

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

this should work comment if you have any issues :)

Answer 3

Add a custom class to your ion-slides tag:

<ion-slides class='my-slides'></ion-slides>

Then apply swiper bullet style on global.scss file:

.my-slides  .swiper-pagination-bullet {
    width: 15px ;
    height: 15px;
}

Answer 4

Use : bullet-background and bullet-background-active

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