Swiperjs не работает должным образом при условном приведении ⇐ Javascript

[Anonymous]

В моем угловом применении у меня есть 4 -го слайда, который я хочу условно. Но это не работает должным образом. Я добавил изображения внизу. Но предположим, что если выберите Swiper_1, то он показывает 1 слайд на представление, но, согласно SwiperParam, он должен показать 4 слайда на представление.
Если я выберу другие, такие как Swiper_2 или Swiper_3, то его показывают 4 слайда на представление, а затем, если я выберу все, все Swiper показывают 4 слайда на вид, кроме предыдущего выбранного Swiper, и тогда, если я выберу все Swiper, показывают 4 слайда, за исключением предыдущего выбранного Swiper ». Подумайте, параметры не применяются должным образом. < /p>
TypeScript -> < /p>

Код: Выделить всё

import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, NgZone, QueryList, Renderer2, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-swiper-testing',
standalone: true,
imports: [CommonModule],
templateUrl: './swiper-testing.component.html',
styleUrls: ['./swiper-testing.component.scss'],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
encapsulation: ViewEncapsulation.None,
})
export class SwiperTestingComponent {

constructor(private el: ElementRef, private cdRef: ChangeDetectorRef, private ngZone: NgZone, private renderer: Renderer2) { }

@ViewChild('swiper_1') swiper_1!: ElementRef;
@ViewChild('swiper_2') swiper_2!: ElementRef;
@ViewChild('swiper_3') swiper_3!: ElementRef;
@ViewChild('swiper_4') swiper_4!: ElementRef;

selectedCategories: string = 'all';

swiperParams = {
loop: false,
slidesPerView: 1,
spaceBetween: 24,
breakpoints: {
640: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
1200: {
slidesPerView: 4,
},
1500: {
slidesPerView: 4.5,
},
1700: {
slidesPerView: 5,
},
1900: {
slidesPerView: 5.5,
},
},
navigation: true,
};

ngAfterViewInit() {
this.swiper_1Swiper();
this.swiper_2Swiper();
this.swiper_3Swiper();
this.swiper_4Swiper();
}

categoriesSelect(value: string) {
if (this.selectedCategories === value) return;

this.selectedCategories = value;
this.cdRef.detectChanges();

// Let Angular fully update the view first
this.ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.ngZone.run(() => {
if (value === 'all' || value === 'swiper_1') this.swiper_1Swiper();
if (value === 'all' || value === 'swiper_2') this.swiper_2Swiper();
if (value === 'all' || value === 'swiper_3') this.swiper_3Swiper();
if (value === 'all' || value === 'swiper_4') this.swiper_4Swiper();
});
}, 0);
});
}

swiper_1Swiper() {
if (this.swiper_1?.nativeElement) {
const swiperEl = this.swiper_1.nativeElement;
Object.assign(swiperEl, this.swiperParams );
swiperEl.initialize();
}
}

swiper_2Swiper() {
if (this.swiper_2?.nativeElement) {
const swiperEl = this.swiper_2.nativeElement;
Object.assign(swiperEl, this.swiperParams);
swiperEl.initialize();
}
}
swiper_3Swiper() {
if (this.swiper_3?.nativeElement) {
const swiperEl = this.swiper_3.nativeElement;
Object.assign(swiperEl, this.swiperParams);
swiperEl.initialize();
}
}
swiper_4Swiper() {
if (this.swiper_4?.nativeElement) {
const swiperEl = this.swiper_4.nativeElement;
Object.assign(swiperEl, this.swiperParams);
swiperEl.initialize();
}
}

}

< /code>
html -> < /p>



All
swiper
swiper 1
swiper 2
swiper 3
swiper 4


[h4]swiper_1 [/h4]







[h4]swiper_2 [/h4]






*ngIf="selectedCategories === 'all' || selectedCategories === 'swiper_3'">
[h4]swiper_3 [/h4]







[h4]swiper_4 [/h4]

All Selected ->

selected swiper_1 ->
alt alte 'alt altember alte ». src = "https://i.sstatic.net/yjmlpz0w.png"/>
selected swiper_2 ->


Подробнее здесь: https://stackoverflow.com/questions/795 ... ditionally