0

I'm using ngx-swiper-wrapper inside a bootstrap card like this below with a routerlink at the top. So if I click anywhere on the card it will route. Works fine! But I want to stop the propagation from routing if I swipe/click left/right on any of the swiper images. I can catch the events, but can't seem to figure out how to stop the propagation inside the event methods.

Any help would be appreciated. One issue is with 'onIndexChange()', the $event is only the index number, so I can't work from that, same with onSwiperEvent(), the $event I pass in is an empt array.

FYI - I tried both below with no luck. Neither stopped the routing

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>
chuckd
  • 13,460
  • 29
  • 152
  • 331

1 Answers1

-1

I didn't find a solution yet, but I did a workaround.

I put routerlinks on different divs (not the top most div - bootstrap card).

So I still get the same outcome, now there are just 3 different routerlinks in the card instead of 1 at the top

chuckd
  • 13,460
  • 29
  • 152
  • 331