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

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

----更新1 ----

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

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

我一直在寻找答案。

就我而言，我有一个过时的刷卡程序包。（https://www.npmjs.com/package/angular2-useful-swiper）。

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

Swiper无法在Angular 5中工作

2 个答案: