多个滑动器与onTouchStart同时移动

Question

我有一个页面(角4)与多个刷子，我想当触摸一个斯威珀(其中任何一个)，所有的滑动在同一时间移动。实际上，当我触摸一个移动的刷卡时，这个刷卡可以工作，但是其他的刷卡不会移动。

我的HTML

<swiper [config]="config">
    <section class="swiper-wrapper">
      <article *ngFor="let article of articles" class="swiper-slide">
        <!--Code-->
      </article>
    </section>
    <div class="swiper-pagination"></div>
  </swiper>

  <!--Code-->

  <section *ngFor="let row of rows">
    <swiper [config]="config">
      <div class="swiper-wrapper">
        <span class="swiper-slide" *ngFor="let col of row.columns">
          <p *ngFor="let detail of col">{{detail}}</p>
        </span>
      </div>
    </swiper>
  </section>

将我的配置到ngOnInit中

this.config = {
  slidesPerView: 'auto',
  centeredSlides: true,
  pagination: '.swiper-pagination',
  paginationClickable: true
};

Answer 1

1.在index.html中添加下面提到的脚本和链接标记：

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

2.在各滑块组件的“.ts”文件中添加以下功能。

declare var Swiper: any;

ngOnInit() {
   var mySwiper = new Swiper('.swiper-container', {
     direction: 'horizontal',
     loop: true,
     effect: 'slide',
     observer: true, 
      observeParents: true
    });
}