在lightbox中打开nxg-owl-carousel-o图片。

我正在使用Angular 8版本的Owl Carousel(2.1.0),我想知道是否有一个选项可以点击滑块内的图片在灯箱中打开?我试了好几种方法,但都没有达到预期的效果……。如果不可能的话,谁能推荐一些其他的插件有这个功能?

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

解决方案:

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

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

在java中处理文件错误转义字符

2022-9-9 5:41:19

未分类

如何在数据框中加入条件的group_by和一些变量。

2022-9-9 5:41:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索