How style swiper 9 pagination in Ionic 7


I migrate to swiper 9 to replace ion slide, it works like a charm but I don’t find how to style navigation button in swiper.

navigation button are in shadow dom in swiper 9:

For swiper 8 I used:

    .swiper-button-next {
      width: var(--swiper-navigation-size);
      background-image: none;

      &::before {
        content: none;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        background-color: #00327b;
        z-index: -1;
        border-radius: 100%;

But it doesn’t work with swiper 9.

I tested injectStyles in attribute of swiper-container and after swiper initialization but I didn’t success to add my CSS.
Here example of my tests:

//this swiper params works for other params like loop by example.

this.swiper.params.injectStyles = [
           :host .swiper-button-prev {
            background-color: red;


  <swiper-container class="slider-images" #swiperHomepage  [autoplay]="true"  [navigation]="true" autoplay-delay="5000" [injectStyles]="swiperStyles">

Where swiperStyles is an array of string like in swiper documentation ( Swiper Element (WebComponent) )


Use CSS custom properties (variables) to change the theme:

Apply following css custom properties for swiper navigation.

 --swiper-navigation-size: 50px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 60px;

///details Part 2 How to apply styles to Swiper 9 component in Ionic 7 Angular Application ? - YouTube