Merge pull request #4235 from vltansky/angular-thumbs

feat(angular): thumbs & controller support
nolimits4web · Feb 16, 2021 · c968932 · c968932
2 parents 01d81d4 + 76acd28
commit c968932
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 81 deletions.
diff --git a/playground/angular/src/app/app.component.html b/playground/angular/src/app/app.component.html
@@ -1,91 +1,159 @@
 <main>
+  <div>
+    <swiper
+      #swiperVirtualRef
+      [slidesPerView]="3"
+      [spaceBetween]="50"
+      [pagination]="{ type: 'fraction' }"
+      virtual
+      slideActiveClass="swiper-active whyWouldIuseCustomClass"
+      [centeredSlides]="true"
+      navigation
+    >
+      <ng-template swiperSlide *ngFor="let slide of virtualSlides; index as i"
+        >Slide {{ slide }}</ng-template
+      >
+      <ng-template swiperSlide>Slide</ng-template>
+      <ng-template swiperSlide>Slide</ng-template>
+    </swiper>
+    <swiper [zoom]="true" [autoplay]="true">
+      <ng-template swiperSlide class="custom-class" [zoom]="true">
+        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
+      </ng-template>
+      <ng-template swiperSlide>
+        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
+      </ng-template>
+      <ng-template swiperSlide [zoom]="true">
+        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
+      </ng-template>
+    </swiper>
+    <swiper
+      #swiperRef
+      [navigation]="navigation"
+      (swiper)="log('swiper')"
+      (slideChange)="log('slideChange')"
+      [slidesPerView]="3"
+      [spaceBetween]="50"
+      [breakpoints]="breakpoints"
+      [scrollbar]="scrollbar"
+      [loop]="true"
+      [(index)]="indexNumber"
+      [pagination]="{ el: '.swiper-pagination.pagination-test' }"
+    >
+      <ng-container *ngIf="show">
+        <ng-template swiperSlide>Best slide ever 1 {{ show }}</ng-template>
+        <ng-template swiperSlide>Best slide ever 2</ng-template>
+      </ng-container>
+      <ng-template swiperSlide>
+        <div *ngIf="true">Best slide ever 3</div>
+      </ng-template>
+      <ng-template swiperSlide let-data *ngFor="let slide of slides; index as i">
+        {{ slide }} / active: {{ data.isActive }} / next: {{ data.isNext }}</ng-template
+      >
+      <div slot="container-end" class="swiper-pagination pagination-test"></div>
+    </swiper>
+    <button (click)="slides.push('test')">Add slide</button>
+    <button (click)="toggleNavigation()">Toggle navigation</button>
+    <button (click)="toggleScrollbar()">Toggle scrollbar</button>
+    <button (click)="breakpointChange()">Breakpoint change</button>
+    <button (click)="show = !show">Toggle show</button>
+    <button (click)="indexNumber = 0">0</button>
+    <button (click)="indexNumber = 3">3</button>
+    <button (click)="indexNumber = 5">5</button>
+    <button (click)="indexNumber = 6">6</button>
+    {{ indexNumber }}
+
+    <swiper [config]="exampleConfig">
+      <ng-template swiperSlide>Best slide ever 2</ng-template>
+      <ng-template swiperSlide>Best slide ever 2</ng-template>
+      <ng-template swiperSlide>Best slide ever 2</ng-template>
+      <ng-template swiperSlide>Best slide ever 2</ng-template>
+      <ng-template swiperSlide>Best slide ever 2</ng-template>
+    </swiper>
+    <button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>
+
+    {{ exampleConfig | json }}
+    <swiper
+      #swiper
+      [slidesPerView]="1"
+      [centeredSlides]="true"
+      [navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
+      [pagination]="pagination"
+    >
+      <ng-template swiperSlide *ngFor="let slide of slides2; index as i">
+        {{ i }} - {{ slide }}
+      </ng-template>
+    </swiper>
+    <button type="button" class="swiper-navigation-prev">&lt;</button>
+    <button type="button" class="swiper-navigation-next">&gt;</button>
+    <hr />
+    <button (click)="replaceSlides()">replace slides</button>
+    <button (click)="togglePagination()">Toggle pagination</button>
+  </div>
+  <div>
   <swiper
-    #swiperVirtualRef
-    [slidesPerView]="3"
+    [slidesPerView]="1"
     [spaceBetween]="50"
-    [pagination]="{ type: 'fraction' }"
-    virtual
-    slideActiveClass="swiper-active whyWouldIuseCustomClass"
-    [centeredSlides]="true"
-    navigation
+    [navigation]="true"
+    [pagination]="{ clickable: true }"
+    [thumbs]="{ swiper: thumbsSwiper }"
   >
-    <ng-template swiperSlide *ngFor="let slide of virtualSlides; index as i"
-      >Slide {{ slide }}</ng-template
-    >
-    <ng-template swiperSlide>Slide</ng-template>
-    <ng-template swiperSlide>Slide</ng-template>
-  </swiper>
-  <swiper [zoom]="true" [autoplay]="true">
-    <ng-template swiperSlide class="custom-class" [zoom]="true">
-      <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
-    </ng-template>
-    <ng-template swiperSlide>
-      <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
-    </ng-template>
-    <ng-template swiperSlide [zoom]="true">
-      <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
-    </ng-template>
+    <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
-    #swiperRef
-    [navigation]="navigation"
-    (swiper)="log('swiper')"
-    (slideChange)="log('slideChange')"
     [slidesPerView]="3"
     [spaceBetween]="50"
-    [breakpoints]="breakpoints"
-    [scrollbar]="scrollbar"
-    [loop]="true"
-    [(index)]="indexNumber"
-    [pagination]="{ el: '.swiper-pagination.pagination-test' }"
-  >
-    <ng-container *ngIf="show">
-      <ng-template swiperSlide>Best slide ever 1 {{ show }}</ng-template>
-      <ng-template swiperSlide>Best slide ever 2</ng-template>
-    </ng-container>
-    <ng-template swiperSlide>
-      <div *ngIf="true">Best slide ever 3</div>
-    </ng-template>
-    <ng-template swiperSlide let-data *ngFor="let slide of slides; index as i">
-      {{ slide }} / active: {{ data.isActive }} / next: {{ data.isNext }}</ng-template
-    >
-    <div slot="container-end" class="swiper-pagination pagination-test"></div>
-  </swiper>
-  <button (click)="slides.push('test')">Add slide</button>
-  <button (click)="toggleNavigation()">Toggle navigation</button>
-  <button (click)="toggleScrollbar()">Toggle scrollbar</button>
-  <button (click)="breakpointChange()">Breakpoint change</button>
-  <button (click)="show = !show">Toggle show</button>
-  <button (click)="indexNumber = 0">0</button>
-  <button (click)="indexNumber = 3">3</button>
-  <button (click)="indexNumber = 5">5</button>
-  <button (click)="indexNumber = 6">6</button>
-  {{ indexNumber }}
-
-  <swiper [config]="exampleConfig">
-    <ng-template swiperSlide>Best slide ever 2</ng-template>
-    <ng-template swiperSlide>Best slide ever 2</ng-template>
-    <ng-template swiperSlide>Best slide ever 2</ng-template>
-    <ng-template swiperSlide>Best slide ever 2</ng-template>
-    <ng-template swiperSlide>Best slide ever 2</ng-template>
-  </swiper>
-  <button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>
-
-  {{ exampleConfig | json }}
-  <swiper
-    #swiper
-    [slidesPerView]="1"
-    [centeredSlides]="true"
-    [navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
-    [pagination]="pagination"
+    (swiper)="setThumbsSwiper($event)"
+    [navigation]="{}"
+    [pagination]="{ clickable: true }"
+    [scrollbar]="{ draggable: true }"
+    [watchSlidesVisibility]="true"
+    [watchSlidesProgress]="true"
   >
-    <ng-template swiperSlide *ngFor="let slide of slides2; index as i">
-      {{ i }} - {{ slide }}
-    </ng-template>
+    <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>
-  <button type="button" class="swiper-navigation-prev">&lt;</button>
-  <button type="button" class="swiper-navigation-next">&gt;</button>
-  <hr />
-  <button (click)="replaceSlides()">replace slides</button>
-  <button (click)="togglePagination()">Toggle pagination</button>
+</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
@@ -8,9 +8,21 @@ import SwiperCore, {
   Virtual,
   Zoom,
   Autoplay,
+  Thumbs,
+  Controller,
 } from '../../../../build/core';
 
-SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom, Autoplay]);
+SwiperCore.use([
+  Navigation,
+  Pagination,
+  Scrollbar,
+  A11y,
+  Virtual,
+  Zoom,
+  Autoplay,
+  Thumbs,
+  Controller,
+]);
 
 @Component({
   selector: 'app-root',
@@ -21,9 +33,19 @@ export class AppComponent {
   @ViewChild('swiperRef', { static: false }) swiperRef?: SwiperComponent;
 
   show: boolean;
+  thumbs: any;
   constructor(private cd: ChangeDetectorRef) {}
   ngOnInit() {}
 
+  thumbsSwiper: any;
+  setThumbsSwiper(swiper) {
+    this.thumbsSwiper = swiper;
+  }
+  controlledSwiper: any;
+  setControlledSwiper(swiper) {
+    this.controlledSwiper = swiper;
+  }
+
   indexNumber = 1;
   exampleConfig = { slidesPerView: 3 };
   slidesPerView: number = 4;

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -446,6 +446,9 @@ export class SwiperComponent implements OnInit {
     this.childrenSlidesInit();
     this.initSwiper();
     this._changeDetectorRef.detectChanges();
+    setTimeout(() => {
+      this.s_swiper.emit(this.swiperRef);
+    });
   }
 
   private childrenSlidesInit() {
@@ -697,6 +700,10 @@ export class SwiperComponent implements OnInit {
         this.swiperRef.currentBreakpoint = null;
         this.swiperRef.setBreakpoint();
       }
+
+      if (changedParams.thumbs || changedParams.controller) {
+        this.updateInitSwiper(changedParams);
+      }
       this.swiperRef.update();
     });
   }