我知道有一个模块,但是我想通过CDN在我的角度应用程序中使用Swiper js。

我已将脚本包含在headindex.html中。

然后在我要使用它的组件中,将它定义为:



  import { Component, OnInit } from '@angular/core';
import { MenuService } from '../_services/menu.service';
import { ContentfulService } from '../_services/contentful.service';
import { Entry } from 'contentful';
declare let Swiper: any;

/* and initialised in the constructor*/

  constructor(
    public menu: MenuService,
    private contentfulService: ContentfulService
  ) {
    new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true,
    });
  }





我没有收到任何错误,但这根本行不通。例如,箭头也已加载,但没有绑定事件。任何帮助深表感谢。

最佳答案

只需更改index.html https://stackblitz.com/edit/angular-d21ywf中的脚本和CSS链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>


并带你的雨刷去之后

import { Component ,AfterViewInit} from '@angular/core';
declare let Swiper: any;


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements AfterViewInit {
  name = 'Angular';

  constructor() {

  }
  ngAfterViewInit() {
    new Swiper('.swiper-container', {
       pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        autoplay: 3000,
        spaceBetween: 30,
        direction: 'vertical',
        loop: true
    });
  }
}

关于javascript - 如何在Angular中使用Swiperjs CDN?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61021368/

10-11 12:48
查看更多