fix: update virtual slides

nolimits4web · Mar 24, 2021 · e33242c · e33242c
1 parent 3aad554
commit e33242c
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 66 deletions.
diff --git a/playground/angular/src/app/app.component.html b/playground/angular/src/app/app.component.html
@@ -5,7 +5,7 @@
       [slidesPerView]="3"
       [spaceBetween]="50"
       [pagination]="{ type: 'fraction' }"
-      virtual
+      [virtual]="true"
       slideActiveClass="swiper-active whyWouldIuseCustomClass"
       [centeredSlides]="true"
       navigation
@@ -16,6 +16,22 @@
       <ng-template swiperSlide>Slide</ng-template>
       <ng-template swiperSlide>Slide</ng-template>
     </swiper>
+
+    <swiper
+      #swiperVirtualRef
+      [slidesPerView]="3"
+      [spaceBetween]="50"
+      [pagination]="{ type: 'fraction' }"
+      [virtual]="true"
+      [centeredSlides]="true"
+      navigation
+    >
+      <ng-template swiperSlide *ngFor="let slide of slides$ | async; index as i"
+        >Slide {{ slide }}</ng-template
+      >
+    </swiper>
+    <button (click)="getSlides()">Get slides</button>
+
     <swiper [zoom]="true" [autoplay]="true">
       <ng-template swiperSlide class="custom-class" [zoom]="true">
         <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
@@ -91,69 +107,69 @@
     <button (click)="togglePagination()">Toggle pagination</button>
   </div>
   <div>
-  <swiper
-    [slidesPerView]="1"
-    [spaceBetween]="50"
-    [navigation]="true"
-    [pagination]="{ clickable: true }"
-    [thumbs]="{ swiper: thumbsSwiper }"
-  >
-    <ng-template swiperSlide>Slide 1</ng-template>
-    <ng-template swiperSlide>Slide 2</ng-template>
-    <ng-template swiperSlide>Slide 3</ng-template>
-    <ng-template swiperSlide>Slide 4</ng-template>
-    <ng-template swiperSlide>Slide 5</ng-template>
-    <ng-template swiperSlide>Slide 6</ng-template>
-  </swiper>
-  <swiper
-    [slidesPerView]="3"
-    [spaceBetween]="50"
-    (swiper)="setThumbsSwiper($event)"
-    [navigation]="{}"
-    [pagination]="{ clickable: true }"
-    [scrollbar]="{ draggable: true }"
-    [watchSlidesVisibility]="true"
-    [watchSlidesProgress]="true"
-  >
-    <ng-template swiperSlide>Slide 1</ng-template>
-    <ng-template swiperSlide>Slide 2</ng-template>
-    <ng-template swiperSlide>Slide 3</ng-template>
-    <ng-template swiperSlide>Slide 4</ng-template>
-    <ng-template swiperSlide>Slide 5</ng-template>
-    <ng-template swiperSlide>Slide 6</ng-template>
-  </swiper>
-</div>
-<div>
-<swiper
-  [slidesPerView]="1"
-  [spaceBetween]="50"
-  [navigation]="true"
-  [pagination]="{ clickable: true }"
-  [controller]="{ control: controlledSwiper }"
->
-  <ng-template swiperSlide>Slide 1</ng-template>
-  <ng-template swiperSlide>Slide 2</ng-template>
-  <ng-template swiperSlide>Slide 3</ng-template>
-  <ng-template swiperSlide>Slide 4</ng-template>
-  <ng-template swiperSlide>Slide 5</ng-template>
-  <ng-template swiperSlide>Slide 6</ng-template>
-</swiper>
-<swiper
-  [slidesPerView]="3"
-  [spaceBetween]="50"
-  (swiper)="setControlledSwiper($event)"
-  [navigation]="{}"
-  [pagination]="{ clickable: true }"
-  [scrollbar]="{ draggable: true }"
-  [watchSlidesVisibility]="true"
-  [watchSlidesProgress]="true"
->
-  <ng-template swiperSlide>Slide 1</ng-template>
-  <ng-template swiperSlide>Slide 2</ng-template>
-  <ng-template swiperSlide>Slide 3</ng-template>
-  <ng-template swiperSlide>Slide 4</ng-template>
-  <ng-template swiperSlide>Slide 5</ng-template>
-  <ng-template swiperSlide>Slide 6</ng-template>
-</swiper>
-</div>
+    <swiper
+      [slidesPerView]="1"
+      [spaceBetween]="50"
+      [navigation]="true"
+      [pagination]="{ clickable: true }"
+      [thumbs]="{ swiper: thumbsSwiper }"
+    >
+      <ng-template swiperSlide>Slide 1</ng-template>
+      <ng-template swiperSlide>Slide 2</ng-template>
+      <ng-template swiperSlide>Slide 3</ng-template>
+      <ng-template swiperSlide>Slide 4</ng-template>
+      <ng-template swiperSlide>Slide 5</ng-template>
+      <ng-template swiperSlide>Slide 6</ng-template>
+    </swiper>
+    <swiper
+      [slidesPerView]="3"
+      [spaceBetween]="50"
+      (swiper)="setThumbsSwiper($event)"
+      [navigation]="{}"
+      [pagination]="{ clickable: true }"
+      [scrollbar]="{ draggable: true }"
+      [watchSlidesVisibility]="true"
+      [watchSlidesProgress]="true"
+    >
+      <ng-template swiperSlide>Slide 1</ng-template>
+      <ng-template swiperSlide>Slide 2</ng-template>
+      <ng-template swiperSlide>Slide 3</ng-template>
+      <ng-template swiperSlide>Slide 4</ng-template>
+      <ng-template swiperSlide>Slide 5</ng-template>
+      <ng-template swiperSlide>Slide 6</ng-template>
+    </swiper>
+  </div>
+  <div>
+    <swiper
+      [slidesPerView]="1"
+      [spaceBetween]="50"
+      [navigation]="true"
+      [pagination]="{ clickable: true }"
+      [controller]="{ control: controlledSwiper }"
+    >
+      <ng-template swiperSlide>Slide 1</ng-template>
+      <ng-template swiperSlide>Slide 2</ng-template>
+      <ng-template swiperSlide>Slide 3</ng-template>
+      <ng-template swiperSlide>Slide 4</ng-template>
+      <ng-template swiperSlide>Slide 5</ng-template>
+      <ng-template swiperSlide>Slide 6</ng-template>
+    </swiper>
+    <swiper
+      [slidesPerView]="3"
+      [spaceBetween]="50"
+      (swiper)="setControlledSwiper($event)"
+      [navigation]="{}"
+      [pagination]="{ clickable: true }"
+      [scrollbar]="{ draggable: true }"
+      [watchSlidesVisibility]="true"
+      [watchSlidesProgress]="true"
+    >
+      <ng-template swiperSlide>Slide 1</ng-template>
+      <ng-template swiperSlide>Slide 2</ng-template>
+      <ng-template swiperSlide>Slide 3</ng-template>
+      <ng-template swiperSlide>Slide 4</ng-template>
+      <ng-template swiperSlide>Slide 5</ng-template>
+      <ng-template swiperSlide>Slide 6</ng-template>
+    </swiper>
+  </div>
 </main>
diff --git a/playground/angular/src/app/app.component.ts b/playground/angular/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 import { SwiperComponent } from 'src/angular/src/public-api';
 import SwiperCore, {
   Navigation,
@@ -34,9 +35,14 @@ export class AppComponent {
 
   show: boolean;
   thumbs: any;
+  slides$ = new BehaviorSubject<string[]>(['']);
   constructor(private cd: ChangeDetectorRef) {}
   ngOnInit() {}
 
+  getSlides() {
+    this.slides$.next(Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`));
+  }
+
   thumbsSwiper: any;
   setThumbsSwiper(swiper) {
     this.thumbsSwiper = swiper;

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -471,6 +471,11 @@ export class SwiperComponent implements OnInit {
     if (!this.virtual) {
       this.prependSlides = of(this.slides.slice(this.slides.length - this.loopedSlides));
       this.appendSlides = of(this.slides.slice(0, this.loopedSlides));
+    } else if (this.swiperRef && this.swiperRef.virtual) {
+      this._ngZone.runOutsideAngular(() => {
+        this.swiperRef.virtual.slides = this.slides;
+        this.swiperRef.virtual.update(true);
+      });
     }
     this._changeDetectorRef.detectChanges();
   };