Ionic 4: style ion-slides bullets

Ionic Framework
1

I’m using ion-slides on my intro page, but struggles with position and colors of the bullets. Added the following to my intro.page.scss without success, but moving it to global.scss it works. I prefer to have it on my intro.page.scss so what have I done wrong ?

.swiper-pagination-bullet-active {
    background:#C400FF !important;
}

.swiper-pagination-bullets {
    bottom: 10px !important;
}
2

I also have same issue

3

There are custom css variables:

--bullet-background
--bullet-background-active
4

@kilylabs - thanks for information, have updated my intro.page.scss, but still need to have the bullets in global.scss in order to work :face_with_raised_eyebrow:

.intro {  
    --bullet-background: blue !important;
    --bullet-background-active: black !important;
}

// not working in intro.page.scss has to be moved to global.scss?
.swiper-pagination-bullets {
    bottom: 10px !important;
}
1 Like