如何在Angular中使用Swiperjs CDN？ [英] How to use Swiperjs CDN in Angular?

问题描述

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

I understand there is a module, but I would like to use Swiper js in my angular app through its CDN.

我已经将脚本包含在 index.html head 头中了$ c>。

I have included the scripts in head of my index.html.

然后在要使用它的组件中，我将其定义为：

Then in the component where I want to use it, I have delared it as such:

  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,
    });
  }

我没有收到任何错误，但根本不会出错工作。例如，箭头也已加载，但没有绑定事件。

I am not getting any errors, but it simply will not work. The arrows for instance are also loaded but there is no event bound to them. Any help is much appreciated.

推荐答案

只需更改index.html https://stackblitz.com/edit/angular-d21ywf

Just change your script and css link in index.html https://stackblitz.com/edit/angular-d21ywf

<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>

然后将您的刷卡器用于afterinit

and take your swiper to afterinit

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
    });
  }
}

这篇关于如何在Angular中使用Swiperjs CDN？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！