Is there a way to call a function only when an element is in the center of a slider?
This is my HTML:
<owl-carousel-o [options]="customOptions">
<ng-container *ngFor="let slide of slides">
<ng-template carouselSlide [id]="slide.id">
<img [src]="slide.img" (swipeup)="startAnimation('swipeup',$event)">
</ng-template>
</ng-container>
</owl-carousel-o>
This is my customOptions:
customOptions: OwlOptions = {
loop: false,
center: true,
dots: false,
nav: false,
responsive: {
0: {
items: 3
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
}
}
The function startAnimation() should only be triggered if the image is in the center.
I'm new to Angular and would appreciate any guidance on this matter.