Hi,
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-prev,
.swiper-button-next {
width: var(--swiper-navigation-size);
background-image: none;
&::after,
&::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.
//this swiper params works for other params like loop by example.
this.swiper.params.injectStyles = [
`
:host .swiper-button-prev {
background-color: red;
}
`
];
this.swiper.update();
Or:
<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) )
Hi,
Use CSS custom properties (variables) to change the theme:
swiper-container{
--swiper-theme-color: #00327b;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-left: auto;
--swiper-pagination-right: 8px;
--swiper-pagination-bottom: 8px;
--swiper-pagination-top: auto;
--swiper-pagination-fraction-color: inherit;
--swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
--swiper-pagination-progressbar-size: 4px;
--swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-border-radius: 50%;
--swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px;
--swiper-scrollbar-border-radius: 10px;
--swiper-scrollbar-top: auto;
--swiper-scrollbar-bottom: 4px;
--swiper-scrollbar-left: auto;
--swiper-scrollbar-right: 4px;
--swiper-scrollbar-sides-offset: 1%;
--swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
--swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
--swiper-scrollbar-size: 4px;
*/
}
Apply following css custom properties for swiper navigation.
--swiper-navigation-size: 50px;
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 60px;
--swiper-navigation-color:orange;
///details Part 2 How to apply styles to Swiper 9 component in Ionic 7 Angular Application ? - YouTube
