在灯箱中打开 nxg-owl-carousel-o 图片

Question

我正在使用 Angular 8 版本的 Owl Carousel (2.1.0)，想知道是否有单击滑块内的图像以在灯箱中打开它的选项？我尝试了几种方法，但 none 确实按预期工作......如果不可能，有人可以推荐一些其他具有此选项的插件......吗？

<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
    };
}

编辑：通过在 img 标签上绑定点击事件解决了这个问题

<ng-template #element carouselSlide>
    <img src="http://placekitten.com/400/400" alt="" class="slider-img" (click)="openSomeLightboxDialog($event)" />
</ng-template>

Answer 1

编辑：通过在 img 标签上绑定点击事件解决了这个问题

<ng-template #element carouselSlide>
    <img src="http://placekitten.com/400/400" alt="" class="slider-img" (click)="openSomeLightboxDialog($event)" />
</ng-template>

在灯箱中打开 nxg-owl-carousel-o 图片

Open nxg-owl-carousel-o image in lightbox

javascript

angular

lightbox

owl-carousel

owl-carousel-2