Enlarging Swiper Navigation Buttons

Question

I'm trying to enlarge the arrow of the Navigation of my swiper.

I found that it is control by this CSS ".swiper-button-next::after", which is defined in swiper.bundle.css. The relevant part is this:

    .swiper-button-next::after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size); // controls the arrow size
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
    }

My preferred option is to control the "swiper-navgiation-size" variable but I can't find a way to set it.

Alternatively, I tried to override these settings from my components css but I can't get access I tried:

::ng-deep .swiper-button-next::after {
    font-size: 150px !important;
  }

and

::after .swiper-button-next {
    font-size: 150px !important;
  }

But nothing works. Any ideas?

Answer 1

Not required any ::ng-deep or ::after

.swiper-button-next {
    font-size: 150px;
  }

Answer 2

The default swiper button size is 44px using less than/greater than fonts ('<' and '>'). The default size is located in the root navigation scss file. To increase the navigation button size, add a css file with this to override the default size:

:root {
    --swiper-navigation-size: 88px;
}

This should double the navigation arrow size.