Angular 5 时刷卡器不工作

Question

我正在尝试将 nolimts4web swiper 集成到我的 Angular 5 项目中，我在 index.html 文件中使用

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

将其放入我的 HTML 文件中：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>

并通过将其放在 index.html 中 body 标记的末尾之前进行初始化：

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
 </script>

发生的事情是它在滑动器中显示 slide 1 但是单击下一步按钮没有任何作用而且我无法滑动，基本上操作不起作用。

Answer 1

请使用此 library 以避免 Swiper 在 html 加载之前初始化。

---- 更新 1 ----

在我看来，您的问题与 HTML 的生命周期有关，也就是说，Swiper 在 html 被 loaded/interpreted 之前被浏览器初始化。为避免此问题，您可以使用链接库或只创建如下所示的组件：

// Don't forget to declare Global variable related to Swiper.
declare var Swiper: any;

@Component({
  selector: 'swiper',
  template: `
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>
`
})
export class SwiperComponent implements AfterViewInit {
    constructor(
        private elementRef: ElementRef
    ) {}

    //[...]

    ngAfterViewInit() {
        /**
         * - Here you are 100% sure, html is present on DOM, Swiper is initialize and is able to find your DOM element.
         * - Swiper constructor accept DOMElement as parameter, i recommand this approch to optimize DOM parsing.
         * - Because you store Swiper instance as attribute, you will be able to control Swiper by javascript. 
        **/
        this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
            //Here you can provide Swiper config
        });
    }
}

Online sample

Answer 2

我一直在寻找答案。

就我而言，我有一个过时的 swiper 包。 (https://www.npmjs.com/package/angular2-useful-swiper).

我卸载了它并安装了这个 npm：https://github.com/JayChase/ngx-useful-swiper（最新版本）angular 7 然后我按照示例操作，现在一切正常。

Angular 5 时刷卡器不工作

Swiper not working in Angular 5

swiper

angular

angular5