joe223 / tiny-swiper

Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
https://tiny-swiper.js.org
1.29k stars 58 forks source link

integration with angular #2

Closed kounelios13 closed 4 years ago

kounelios13 commented 4 years ago

Describe the bug This is not a bug report . However I am wondering if it is possible to use this library with an angular application

joe223 commented 4 years ago

I'm not familiar with with Angular. But this demonstration should be useful.

import { Component, AfterViewInit } from "@angular/core";
import Swiper = require("tiny-swiper");

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  title = "CodeSandbox";
  swiper = null;

  ngAfterViewInit() {
    this.swiper = new Swiper("#swiper1", {
      mousewheel: true
    });
  }
}

https://codesandbox.io/s/angular-5d87x

We have to ensure that HTMLElement is exist before TinySwiper initialize.