Issue
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?
Solution
Not required any ::ng-deep or ::after
.swiper-button-next {
font-size: 150px;
}
Answered By - Arijit Bag
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.