How to change color and size of ionic slider

user_11575785 0
Viewed 3378

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;
}
ionic4 sass
4 Answers

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 ;

    } 
}
user_95309360 
.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 :)

user_100537930

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;
}
user_42245110
user_101277270
Related