Skip to content

Commit 4f1e9c4

Browse files
vltanskyvltansky
committed
fix(angular): autoplay SSR
1 parent c1eb42f commit 4f1e9c4

File tree

3 files changed

+83
-81
lines changed

3 files changed

+83
-81
lines changed

‎playground/angular/src/app/app.component.html

+13-13
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<ng-template swiperSlide>Slide</ng-template>
1616
<ng-template swiperSlide>Slide</ng-template>
1717
</swiper>
18-
<swiper [zoom]="true">
18+
<swiper [zoom]="true" [autoplay]="true">
1919
<ng-template swiperSlide class="custom-class" [zoom]="true">
2020
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
2121
</ng-template>
@@ -40,7 +40,7 @@
4040
[pagination]="{ el: '.swiper-pagination.pagination-test' }"
4141
>
4242
<ng-container *ngIf="show">
43-
<ng-template swiperSlide>Best slide ever 1</ng-template>
43+
<ng-template swiperSlide>Best slide ever 1 {{ show }}</ng-template>
4444
<ng-template swiperSlide>Best slide ever 2</ng-template>
4545
</ng-container>
4646
<ng-template swiperSlide>
@@ -52,33 +52,32 @@
5252
<div slot="container-end" class="swiper-pagination pagination-test"></div>
5353
</swiper>
5454
<button (click)="slides.push('test')">Add slide</button>
55-
<swiper [config]="exampleConfig">
56-
<ng-template swiperSlide>Best slide ever 2</ng-template>
57-
<ng-template swiperSlide>Best slide ever 2</ng-template>
58-
<ng-template swiperSlide>Best slide ever 2</ng-template>
59-
<ng-template swiperSlide>Best slide ever 2</ng-template>
60-
<ng-template swiperSlide>Best slide ever 2</ng-template>
61-
</swiper>
62-
<button (click)="togglePagination()">Toggle pagination</button>
6355
<button (click)="toggleNavigation()">Toggle navigation</button>
6456
<button (click)="toggleScrollbar()">Toggle scrollbar</button>
6557
<button (click)="breakpointChange()">Breakpoint change</button>
66-
58+
<button (click)="show = !show">Toggle show</button>
6759
<button (click)="indexNumber = 0">0</button>
6860
<button (click)="indexNumber = 3">3</button>
6961
<button (click)="indexNumber = 5">5</button>
7062
<button (click)="indexNumber = 6">6</button>
7163
{{ indexNumber }}
64+
65+
<swiper [config]="exampleConfig">
66+
<ng-template swiperSlide>Best slide ever 2</ng-template>
67+
<ng-template swiperSlide>Best slide ever 2</ng-template>
68+
<ng-template swiperSlide>Best slide ever 2</ng-template>
69+
<ng-template swiperSlide>Best slide ever 2</ng-template>
70+
<ng-template swiperSlide>Best slide ever 2</ng-template>
71+
</swiper>
7272
<button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>
7373

74-
<button (click)="show = !show">Toggle show</button>
7574
{{ exampleConfig | json }}
7675
<swiper
7776
#swiper
7877
[slidesPerView]="1"
7978
[centeredSlides]="true"
8079
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
81-
[pagination]="{ type: 'fraction' }"
80+
[pagination]="pagination"
8281
>
8382
<ng-template swiperSlide *ngFor="let slide of slides2; index as i">
8483
{{ i }} - {{ slide }}
@@ -88,4 +87,5 @@
8887
<button type="button" class="swiper-navigation-next">&gt;</button>
8988
<hr />
9089
<button (click)="replaceSlides()">replace slides</button>
90+
<button (click)="togglePagination()">Toggle pagination</button>
9191
</main>

‎playground/angular/src/app/app.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import SwiperCore, {
77
A11y,
88
Virtual,
99
Zoom,
10+
Autoplay,
1011
} from '../../../../build/core';
1112

12-
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom]);
13+
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom, Autoplay]);
1314

1415
@Component({
1516
selector: 'app-root',
@@ -35,7 +36,7 @@ export class AppComponent {
3536

3637
togglePagination() {
3738
if (!this.pagination) {
38-
this.pagination = { clickable: true };
39+
this.pagination = { type: 'fraction' };
3940
} else {
4041
this.pagination = false;
4142
}

‎src/angular/src/swiper.component.ts

+67-66
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import {
66
ElementRef,
77
EventEmitter,
88
HostBinding,
9+
Inject,
910
Input,
1011
NgZone,
1112
OnInit,
1213
Output,
14+
PLATFORM_ID,
1315
QueryList,
1416
SimpleChanges,
1517
ViewChild,
@@ -28,6 +30,7 @@ import {
2830
ScrollbarOptions,
2931
VirtualOptions,
3032
} from 'swiper/types';
33+
import { isPlatformBrowser } from '@angular/common';
3134
@Component({
3235
selector: 'swiper, [swiper]',
3336
templateUrl: './swiper.component.html',
@@ -415,9 +418,10 @@ export class SwiperComponent implements OnInit {
415418

416419
@HostBinding('class') containerClasses = 'swiper-container';
417420
constructor(
418-
private zone: NgZone,
421+
private _ngZone: NgZone,
419422
private elementRef: ElementRef,
420423
private _changeDetectorRef: ChangeDetectorRef,
424+
@Inject(PLATFORM_ID) private _platformId,
421425
) {}
422426

423427
private _setElement(el: ElementRef, ref: any, update: string, key = 'el') {
@@ -441,11 +445,8 @@ export class SwiperComponent implements OnInit {
441445

442446
ngAfterViewInit() {
443447
this.childrenSlidesInit();
444-
445-
if (this.init) {
446-
this.initSwiper();
447-
this._changeDetectorRef.detectChanges();
448-
}
448+
this.initSwiper();
449+
this._changeDetectorRef.detectChanges();
449450
}
450451

451452
private childrenSlidesInit() {
@@ -476,65 +477,65 @@ export class SwiperComponent implements OnInit {
476477
initSwiper() {
477478
const { params: swiperParams, passedParams } = getParams(this);
478479
Object.assign(this, swiperParams);
479-
swiperParams.onAny = (event, ...args) => {
480-
const emitter = this[`s_${event}`] as EventEmitter<any>;
481-
if (emitter) {
482-
emitter.emit(...args);
483-
}
484-
};
485-
486-
Object.assign(swiperParams.on, {
487-
slideChange: () => {
488-
this.indexChange.emit(this.swiperRef.realIndex);
489-
},
490-
_containerClasses(swiper, classes) {
491-
this.containerClasses = classes;
492-
},
493-
_swiper: (swiper) => {
494-
this.swiperRef = swiper;
495-
this.s_swiper.emit(this.swiperRef);
496-
swiper.loopCreate = () => {};
497-
swiper.loopDestroy = () => {};
498-
if (swiperParams.loop) {
499-
swiper.loopedSlides = this.loopedSlides;
480+
this._ngZone.runOutsideAngular(() => {
481+
swiperParams.init = false;
482+
swiperParams.observer = true;
483+
swiperParams.onAny = (event, ...args) => {
484+
const emitter = this[`s_${event}`] as EventEmitter<any>;
485+
if (emitter) {
486+
emitter.emit(...args);
500487
}
501-
if (swiper.virtual && swiper.params.virtual.enabled) {
502-
swiper.virtual.slides = this.slides;
503-
const extendWith = {
504-
cache: false,
505-
renderExternal: (data) => {
506-
this.updateVirtualSlides(data);
507-
},
508-
renderExternalUpdate: false,
509-
};
510-
extend(swiper.params.virtual, extendWith);
511-
extend(swiper.originalParams.virtual, extendWith);
512-
}
513-
this._changeDetectorRef.detectChanges();
514-
},
515-
_slideClasses: (_, updated) => {
516-
updated.forEach(({ slideEl, classNames }, index) => {
517-
const slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index')) || index;
518-
if (this.virtual) {
519-
const virtualSlide = this.slides.find((item) => {
520-
return item.virtualIndex && item.virtualIndex === slideIndex;
521-
});
522-
if (virtualSlide) {
523-
virtualSlide.classNames = classNames;
524-
return;
488+
};
489+
Object.assign(swiperParams.on, {
490+
_containerClasses(swiper, classes) {
491+
this.containerClasses = classes;
492+
},
493+
_slideClasses: (_, updated) => {
494+
updated.forEach(({ slideEl, classNames }, index) => {
495+
const slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index')) || index;
496+
if (this.virtual) {
497+
const virtualSlide = this.slides.find((item) => {
498+
return item.virtualIndex && item.virtualIndex === slideIndex;
499+
});
500+
if (virtualSlide) {
501+
virtualSlide.classNames = classNames;
502+
return;
503+
}
525504
}
526-
}
527505

528-
if (this.slides[slideIndex]) {
529-
this.slides[slideIndex].classNames = classNames;
530-
}
531-
});
506+
if (this.slides[slideIndex]) {
507+
this.slides[slideIndex].classNames = classNames;
508+
}
509+
});
510+
this._changeDetectorRef.detectChanges();
511+
},
512+
});
513+
const swiperRef = new Swiper(swiperParams);
514+
swiperRef.loopCreate = () => {};
515+
swiperRef.loopDestroy = () => {};
516+
if (swiperParams.loop) {
517+
swiperRef.loopedSlides = this.loopedSlides;
518+
}
519+
if (swiperRef.virtual && swiperRef.params.virtual.enabled) {
520+
swiperRef.virtual.slides = this.slides;
521+
const extendWith = {
522+
cache: false,
523+
renderExternal: (data) => {
524+
this.updateVirtualSlides(data);
525+
},
526+
renderExternalUpdate: false,
527+
};
528+
extend(swiperRef.params.virtual, extendWith);
529+
extend(swiperRef.originalParams.virtual, extendWith);
530+
}
531+
532+
if (isPlatformBrowser(this._platformId)) {
533+
this.swiperRef = swiperRef.init(this.elementRef.nativeElement);
532534
this._changeDetectorRef.detectChanges();
533-
},
534-
});
535-
swiperParams.observer = true;
536-
this.zone.runOutsideAngular(() => {
537-
new Swiper(this.elementRef.nativeElement, swiperParams);
535+
swiperRef.on('slideChange', () => {
536+
this.indexChange.emit(this.swiperRef.realIndex);
537+
});
538+
}
538539
});
539540
}
540541

@@ -561,7 +562,7 @@ export class SwiperComponent implements OnInit {
561562
this.currentVirtualData = virtualData;
562563
this._activeSlides.next(virtualData.slides);
563564
this._changeDetectorRef.detectChanges();
564-
this.zone.runOutsideAngular(() => {
565+
this._ngZone.runOutsideAngular(() => {
565566
this.swiperRef.updateSlides();
566567
this.swiperRef.updateProgress();
567568
this.swiperRef.updateSlidesClasses();
@@ -583,7 +584,7 @@ export class SwiperComponent implements OnInit {
583584
return;
584585
}
585586

586-
this.zone.runOutsideAngular(() => {
587+
this._ngZone.runOutsideAngular(() => {
587588
const {
588589
params: currentParams,
589590
pagination,
@@ -663,7 +664,7 @@ export class SwiperComponent implements OnInit {
663664
}
664665

665666
updateSwiper(changedParams: SimpleChanges | any) {
666-
this.zone.runOutsideAngular(() => {
667+
this._ngZone.runOutsideAngular(() => {
667668
if (changedParams.config) {
668669
return;
669670
}
@@ -749,7 +750,7 @@ export class SwiperComponent implements OnInit {
749750
if (index === this.swiperRef.activeIndex) {
750751
return;
751752
}
752-
this.zone.runOutsideAngular(() => {
753+
this._ngZone.runOutsideAngular(() => {
753754
if (this.loop) {
754755
this.swiperRef.slideToLoop(index, speed, !silent);
755756
} else {
@@ -759,7 +760,7 @@ export class SwiperComponent implements OnInit {
759760
}
760761

761762
ngOnDestroy() {
762-
this.zone.runOutsideAngular(() => {
763+
this._ngZone.runOutsideAngular(() => {
763764
this.swiperRef?.destroy();
764765
});
765766
}

0 commit comments

Comments
 (0)