Как остановить распространение при нажатии кнопки следующего / предыдущего изображения swiper.js внутри карточки начальной загрузки

Question

Я использую ngx-swiper-wrapper внутри карты начальной загрузки, как показано ниже, со ссылкой на маршрутизатор вверху. Поэтому, если я щелкну в любом месте карты, он будет маршрутизироваться. Работает отлично! Но я хочу остановить распространение от маршрутизации, если я смахну / щелкну влево / вправо на любом из изображений свайпера. Я могу поймать события, но не могу понять, как остановить распространение внутри методов событий.

Любая помощь будет оценена. Одна проблема связана с onIndexChange(), событие $ - это только номер индекса, поэтому я не могу работать с ним, как и с onSwiperEvent (), событие $, которое я передаю, представляет собой массив empt.

К вашему сведению - я пробовал оба ниже, но безуспешно. Ни один не остановил маршрутизацию

       preventClicksPropagation: true,
touchMoveStopPropagation: true

         <div class="card" [routerLink]="['/events', event.id]">
  <swiper [config]="eventsSwiperConfig" [(index)]="index" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent($event)"></swiper>
  <ng-container *ngFor="let photo of event.photoUrl">
    <div class="outer-img-container">
      <div class="img-container">
        <img class="card-img swiper-lazy" src="{{photo}}">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
    </div>
  </ng-container>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Answer 1

Я еще не нашел решения, но нашел обходной путь.

Я помещаю ссылки на маршрутизаторы на разные div (не на самую верхнюю карту div - bootstrap).

Так что я все еще получаю тот же результат, теперь на карте всего 3 разных маршрутизатора, а не 1 вверху