I am trying to implement the new Swiper V9 in Angular 14.
When the slider is loaded and ready for usage, the state of "swiper-button-prev" is non loaded. So even if there is no previous slider, it is not getting the right state (should have opacity 0.3). Only after the first interaction with the slider (sliding to next), it gets the right state.
Same behaviour with the "sliderYear". It only gets loaded after I interact with the slider.
See images below:
When slider is initially loaded, the sliderYear is missing and the style for the prev button is not right. enter image description here
After going to next and returning back to the first slide, I got the slideYear and the style for the prev button are how they should be. enter image description here
html
<p class="font-montserrat font-bold text-2xl tablet:text-5xl md:mx-14 w-full md:w-auto text-center">{{ sliderYear }}</p>
<swiper-container
class="mySwiper snap-x snap-mandatory grid gap-5 grid-flow-col col-span-full overflow-x-auto scrollbar-none mt-5 tablet:mt-9 px-5 md:px-10 2xl:px-82px"
init="false"
#swiperHistory
>
<swiper-slide *ngFor="let slide of content?.content?.history">
<div class="w-100vwpadding md:w-520px snap-center snap-always">
<app-image class="w-full mb-5 md:mb-4" [image]="slide.img[0].src | cmsCloudinaryImage"></app-image>
<div class="text-on-slide">
<h3 class="font-montserrat font-bold text-lg tablet:text-2xl leading-tight mb-2.5">{{ slide.headline }}</h3>
<p>
{{ slide.text }}
</p>
</div>
</div>
</swiper-slide>
</swiper-container>
ts
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
import { Image } from '../../../../services/cms/interfaces/image.interface';
import { Contentblock } from '../../../../services/cms/interfaces/cms-page.interface';
import { SwiperOptions } from 'swiper/types';
import Swiper from 'swiper';
interface HistoryContent {
headline: string;
history: History[];
}
export interface History {
headline: string;
text: string;
year: string;
img: Image[];
}
@Component({
selector: 'app-history',
templateUrl: './history.component.html',
styleUrls: ['./history.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class HistoryComponent implements AfterViewInit, OnDestroy {
@Input() content: Contentblock<HistoryContent> | undefined;
@ViewChild('swiperHistory') private _swiper: ElementRef | undefined;
public sliderYear: string = '';
private swiper: Swiper | undefined;
constructor(private ref: ChangeDetectorRef) {}
ngAfterViewInit() {
this.sliderYear = this.content?.content.history[0]?.year || '';
this.swiper = this._swiper?.nativeElement.swiper;
const params: SwiperOptions = {
injectStyles: [
`
.swiper-button-prev:after, :host(.swiper-rtl) .swiper-button-next:after,
.swiper-button-next:after, :host(.swiper-rtl) .swiper-button-prev:after{
display: none;
}
swiper-slide {
opacity: 0.3
}
swiper-slide.swiper-slide-active {
opacity: 1
}
`,
],
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
freeMode: true,
slidesPerView: 4.5,
spaceBetween: 30,
centeredSlides: true,
};
Object.assign(this._swiper?.nativeElement, params);
this._swiper?.nativeElement.initialize();
this._swiper?.nativeElement.addEventListener('slidechange', (event: any) => {
this.sliderYear = this.content?.content.history[event.detail[0].realIndex]?.year || '';
console.log(this.sliderYear);
this.ref.markForCheck();
});
}
ngOnDestroy() {
this._swiper?.nativeElement.removeEventListener('slidechange');
}
}
Alreday tried it with this solutions, didn't work out for me.
