feat(angular): support data-swiper-autoplay (#4946)

* feat(angular): support data-swiper-autoplay * feat(angular): data-swiper-autoplay demos
nolimits4web · Sep 13, 2021 · d665fb9 · d665fb9
1 parent 87daa8c
commit d665fb9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 19 deletions.
diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html
@@ -1,4 +1,23 @@
 <main>
+  <div>
+    <h4>data-swiper-autoplay</h4>
+    <swiper
+      [loop]="true"
+      [autoHeight]="true"
+      [allowTouchMove]="false"
+      [autoplay]="{ delay: 1000, pauseOnMouseEnter: false, disableOnInteraction: false }"
+      [pagination]="{ clickable: true }"
+      [navigation]="true"
+    >
+      <ng-template data-swiper-autoplay="6000" swiperSlide> Slide 1 </ng-template>
+
+      <ng-template data-swiper-autoplay="10000" class="swiper-slide" swiperSlide>
+        Slide 2
+      </ng-template>
+
+      <ng-template data-swiper-autoplay="60000" swiperSlide> Slide 3 </ng-template>
+    </swiper>
+  </div>
   <div>
     <h4>Slide change</h4>
     <swiper direction="horizontal" (slideChange)="onSlideChange($event)">

diff --git a/playground/angular/src/app/home/home.component.ts b/playground/angular/src/app/home/home.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectorRef, Component, NgZone, ViewChild } from '@angular/core';
-import Swiper from 'dist/swiper';
 import { BehaviorSubject } from 'rxjs';
 import { SwiperComponent } from 'src/angular/src/public-api';
 import SwiperCore, {
@@ -43,12 +42,12 @@ export class HomePage {
     this.slides$.next(Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`));
   }
 
-  thumbsSwiper: Swiper;
-  setThumbsSwiper(swiper: Swiper) {
+  thumbsSwiper: SwiperCore;
+  setThumbsSwiper(swiper: SwiperCore) {
     this.thumbsSwiper = swiper;
   }
-  controlledSwiper: Swiper;
-  setControlledSwiper(swiper: Swiper) {
+  controlledSwiper: SwiperCore;
+  setControlledSwiper(swiper: SwiperCore) {
     this.controlledSwiper = swiper;
   }
 
@@ -108,7 +107,7 @@ export class HomePage {
 
   slidesEx = ['first', 'second'];
 
-  onSlideChange(swiper: Swiper) {
+  onSlideChange(swiper: SwiperCore) {
     if (swiper.isEnd) {
       // all swiper events are run outside of ngzone, so use ngzone.run or detectChanges to update the view.
       this.ngZone.run(() => {

diff --git a/src/angular/src/swiper-slide.directive.ts b/src/angular/src/swiper-slide.directive.ts
@@ -6,6 +6,7 @@ import { coerceBooleanProperty } from './utils/utils';
 export class SwiperSlideDirective {
   @Input() virtualIndex: number;
   @Input() class: string = '';
+  @Input('data-swiper-autoplay') autoplayDelay: string | null = null;
   @Input()
   set zoom(val: boolean) {
     this._zoom = coerceBooleanProperty(val);

diff --git a/src/angular/src/swiper.component.html b/src/angular/src/swiper.component.html
@@ -7,47 +7,65 @@
 <div *ngIf="pagination && showPagination" class="swiper-pagination" #paginationElRef></div>
 <div [ngClass]="wrapperClass" [attr.id]="id">
   <ng-content select="[slot=wrapper-start]"></ng-content>
-  <ng-template *ngTemplateOutlet="
+  <ng-template
+    *ngTemplateOutlet="
       slidesTemplate;
       context: {
         loopSlides: prependSlides,
         key: 'prepend'
       }
-    "></ng-template>
-  <ng-template *ngTemplateOutlet="
+    "
+  ></ng-template>
+  <ng-template
+    *ngTemplateOutlet="
       slidesTemplate;
       context: {
         loopSlides: activeSlides,
         key: ''
       }
-    "></ng-template>
-  <ng-template *ngTemplateOutlet="
+    "
+  ></ng-template>
+  <ng-template
+    *ngTemplateOutlet="
       slidesTemplate;
       context: {
         loopSlides: appendSlides,
         key: 'append'
       }
-    "></ng-template>
+    "
+  ></ng-template>
   <ng-content select="[slot=wrapper-end]"></ng-content>
 </div>
 <ng-content select="[slot=container-end]"></ng-content>
 
 <ng-template #slidesTemplate let-loopSlides="loopSlides" let-slideKey="key">
-  <div *ngFor="let slide of loopSlides | async" [ngClass]="
+  <div
+    *ngFor="let slide of loopSlides | async"
+    [ngClass]="
       (slide.class ? slide.class + ' ' : '') +
       slideClass +
       (slideKey !== '' ? ' ' + slideDuplicateClass : '')
-    " [attr.data-swiper-slide-index]="slide.virtualIndex ? slide.virtualIndex : slide.slideIndex" [style]="style"
-    [ngSwitch]="slide.zoom">
+    "
+    [attr.data-swiper-slide-index]="slide.virtualIndex ? slide.virtualIndex : slide.slideIndex"
+    [attr.data-swiper-autoplay]="slide.autoplayDelay"
+    [style]="style"
+    [ngSwitch]="slide.zoom"
+  >
     <div *ngSwitchCase="true" [ngClass]="zoomContainerClass">
-      <ng-template [ngTemplateOutlet]="slide.template" [ngTemplateOutletContext]="{
+      <ng-template
+        [ngTemplateOutlet]="slide.template"
+        [ngTemplateOutletContext]="{
           $implicit: slide.slideData
-        }"></ng-template>
+        }"
+      ></ng-template>
     </div>
     <ng-container *ngSwitchDefault>
-      <ng-template [ngTemplateOutlet]="slide.template" [ngTemplateOutletContext]="{
+      <ng-template
+        [ngTemplateOutlet]="slide.template"
+        [ngTemplateOutletContext]="{
           $implicit: slide.slideData
-        }"></ng-template>
+        }"
+      ></ng-template>
     </ng-container>
   </div>
 </ng-template>