在Angular的onclick中使用Siema的api

import Siema from 'siema';

const siema = new Siema({
  selector: '.siema',
  duration: 500,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  loop: false,
});

siema.next();

siema.prev();

siema.goTo(2);

siema.remove(1);

siema.insert('<div>New item</div>', 2);

import { Component, ElementRef, ViewChild } from '@angular/core';
import Siema from 'siema';

@Component({
  selector: 'app-carousel',
  template: `
    <div #carousel class="siema">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </div>
    <button (click)="prev()">Previous</button>
    <button (click)="next()">Next</button>
  `,
})
export class CarouselComponent {
  @ViewChild('carousel') carouselRef: ElementRef;

  private siema: Siema;

  ngAfterViewInit() {
    this.siema = new Siema({
      selector: this.carouselRef.nativeElement,
    });
  }

  prev() {
    this.siema.prev();
  }

  next() {
    this.siema.next();
  }
}