ngx-lightbox：一个简单易用的图片轮播库

概述

ngx-lightbox是一个基于Angular框架的图片轮播库，旨在提供一种简单易用的方式来浏览和轮播图片。

功能特性

• 点击图片可放大浏览
• 支持多张图片轮播
• 支持键盘控制轮播
• 支持全屏浏览
• 支持自定义配置
• 支持响应式布局

安装

npm install ngx-lightbox --save

使用方法

import { NgxLightboxModule } from 'ngx-lightbox';

@NgModule({
  imports: [
    NgxLightboxModule.forRoot()
  ]
})
export class AppModule { }

<ngx-lightbox [src]="images" [thumbSrc]="thumbnailImages"></ngx-lightbox>

配置选项

ngx-lightbox支持多种自定义配置，以下为可选的配置项：

1. centerVertically：是否垂直居中显示，默认为true；
2. enableKeyboard：是否启用键盘控制，默认为true；
3. resizeDuration：图片缩放动画时间，单位为毫秒，默认为200；
4. wrapAround：是否循环轮播，默认为false；
5. showImageNumberLabel：是否显示图片数量标签，默认为true；
6. disableScrolling：是否禁止页面滚动，默认为true；
7. positionFromTop：从窗口顶部的距离，单位为像素，默认为50；
8. positionFromLeft：从窗口左侧的距离，单位为像素，默认为0；
9. resizeOnLoad：是否在加载时缩放图片，默认为false。

可根据需要进行自定义配置。

示例

基本轮播

<ngx-lightbox [src]="images"></ngx-lightbox>

带缩略图的轮播

<ngx-lightbox [src]="images" [thumbSrc]="thumbnailImages"></ngx-lightbox>

自定义图片数量标签

<ngx-lightbox [src]="images" [showImageNumberLabel]="false">
  <div class="my-label">{{currentIndex + 1}} / {{album.length}}</div>
</ngx-lightbox>

结语

查询更多信息，请访问ngx-lightbox官方网站。