Question

我有一个带有多个游标的页面（角度为4），我想在触摸Swiper（其中任何一个）时，所有游标都会同时移动。实际上，当我触摸滑动器移动时，滑动器工作，但其他Swipers不动。

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

多个Swipers与onTouchStart同时移动

1 个答案: