Как использовать Swiper js CDN в Angular? - PullRequest
Новая
       13

Как использовать Swiper js CDN в Angular?

0 голосов
/ 04 апреля 2020

Я понимаю, что есть модуль, но я хотел бы использовать Swiper js в моем приложении angular через его CDN.

Я включил сценарии в 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,
    });
  }

Я не получаю никаких ошибок, но он просто не будет работать. Например, стрелки также загружены, но с ними не связано событие. Любая помощь очень ценится.

1 Ответ

1 голос
/ 04 апреля 2020

Просто измените ваш сценарий и css ссылку в индексе. 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>

и перенесите ваш swiper в 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
    });
  }
}
...