我知道有一个模块,但是我想通过CDN在我的角度应用程序中使用Swiper js。
我已将脚本包含在head
的index.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/