<div class="controlContainer">
  <span class="controlBar" (click)="carousel.pre()">
    <i class="anticon anticon-left">1</i>
  </span>
  <span class="controlBar" (click)="carousel.next()">
    <i class="anticon anticon-right">2</i>
  </span>
</div>
<nz-carousel #carousel [nzEffect]="effect"  >//#carousel模板區域性變數，用於在程式碼中獲取
  <div class="go" nz-carousel-content *ngFor="let index of array">
    <div><img src="{{index}}"></div>
  </div>
</nz-carousel>
 

import { Component, OnInit ,AfterViewInit,ViewChild} from '@angular/core';
import { NzCarouselComponent } from 'ng-zorro-antd';
import { ElementRef } from '@angular/core';


// import * as $ from 'jquery';
// import *as Swiper from "../../../node_modules/swiper/dist/js/swiper";
@Component({
  selector: 'app-myswiper',
  templateUrl: './myswiper.component.html',
  styleUrls: ['./myswiper.component.css']
})
export class MyswiperComponent implements OnInit,AfterViewInit{
  constructor(public element: ElementRef) {}
  ngAfterViewInit(): void {
    // console.log(this.carousel);
    // console.log(this.element.nativeElement.querySelector('#carousel').goTo(2));
    console.log(this.carousel);

  }
  array = [ "../../assets/imgs/banner1.jpg",
            "../../assets/imgs/banner2.jpg",
            "../../assets/imgs/banner3.jpg"];
  // array =[1,2,3,4];
  effect = 'scrollx';
  // NzCarouselComponent 
  
  // 使用ViewChild獲取模板中的區域性變數#carousel，獲取後為原物件不是dom物件
  @ViewChild('carousel')
  carousel:NzCarouselComponent;
  ngOnInit() {
    setTimeout(() => {
      this.effect = 'fade';
    }, 1000);
  }
  


}