I am using the Angular 8 version of Owl Carousel (2.1.0), and was wondering is there an option to click the image inside the slider to open it in a lightbox? I tried several ways but none were really working as expected... If it is not possible, could someone recommend some other plugin which has this option..?
<owl-carousel-o [options]="customOptions" class="slider">
<!--*ngFor="let image of images"-->
<ng-template carouselSlide>
<img src="http://placekitten.com/500/300" alt="" class="slider-img" />
</ng-template>
<ng-template carouselSlide>
<img src="http://placekitten.com/400/400" alt="" class="slider-img" />
</ng-template>
<ng-template carouselSlide>
<img src="http://placekitten.com/400/300" alt="" class="slider-img" />
</ng-template>
</owl-carousel-o>
ngOnInit() {
this.customOptions = {
loop: true,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
autoHeight: true,
dots: false,
autoplay: true,
autoplaySpeed: 300,
autoplayHoverPause: true,
navSpeed: 700,
navText: ['', ''],
responsive: {
0: {
items: 2
},
300: {
items: 4
}
},
nav: false
};
}
Edit: Resolved it with binding click event on img tag
<ng-template #element carouselSlide>
<img src="http://placekitten.com/400/400" alt="" class="slider-img" (click)="openSomeLightboxDialog($event)" />
</ng-template>
Edit: Resolved it with binding click event on img tag
<ng-template #element carouselSlide>
<img src="http://placekitten.com/400/400" alt="" class="slider-img" (click)="openSomeLightboxDialog($event)" />
</ng-template>