带有Lightbox的图像滑块(适用于Angular 6+)

带有Lightbox的图像滑块(适用于Angular 6+)
插件名称 ng-image-slider
发布时间 2020年5月5日
插件作者 sanjayV

带有图像灯箱弹出窗口的Angular 6自适应图像滑块。

安装:

# NPM
$ npm install ng-image-slider --save

使用:

1.导入模块到你的app.module.ts

import { NgImageSliderModule } from 'ng-image-slider';
...

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgImageSliderModule,
        ...
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {
}

2.在模板文件中添加组件。

<ng-image-slider [images]="imageObject" #nav></ng-image-slider>

ImageObject格式

imageObject: Array<object width="300" height="150"> = [{
        image: 'assets/img/slider/1.jpg',
        thumbImage: 'assets/img/slider/1_min.jpeg',
        alt: 'alt of image',
        title: 'title of image'
    }, {
        image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // 支持base64图片
        thumbImage: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // 支持base64图片
        title: 'Image title', //可选:如果要显示带标题的图像,可以使用此键
        alt: 'Image alt' //可选:如果要用alt显示图像,可以使用此键
    }
];

图片,YouTube和MP4网址的对象格式

imageObject: Array<object> = [{
       video: 'https://youtu.be/6pxRHBw-k8M' // Youtube地址
   },
   {
   	video: 'assets/video/movie.mp4', // MP4视频地址
   },
   {
   	video: 'assets/video/movie2.mp4',
       posterImage: 'assets/img/slider/2_min.jpeg', //可选:如果要在滑块中显示视频海报图像,可以使用此键
       title: 'Image title'
   },
   {
   	image: 'assets/img/slider/1.jpg',
       thumbImage: 'assets/img/slider/1_min.jpeg',
       alt: 'Image alt'
   }
   ...
];

API

名称 类型 数据类型 描述 默认
infinite @Input boolean 如果值为true,则无限滑动图像。 false
imagePopup @Input boolean 在滑块图像单击上启用图像lightBox弹出选项。 true
animationSpeed @Input number 通过此用户可以设置滑块动画速度。最小值为0.1秒,最大值为5秒。 1
slideImage @Input number 设置单击左/右箭头将移动多少图像。 1
imageSize @Input object 设置滑块图像的宽度,高度和空间。space用于设置滑块图像之间的空间。像这样传递对象,{width: ‘400px’, height: ‘300px’, space: 4}或者您可以按百分比传递值{width: ‘20%’, height: ‘20%’}或仅设置空间{space: 4} {width: 205, height: 200, space: 3}
manageImageRatio @Input boolean 如果值为,则以宽高比显示图像,true并在父div上设置imageSize宽度和高度 false
autoSlide @Input number 根据提供的时间自动滑动图像。仅当infinite option为true时, Option才有效。最小值为1秒,最大值为5秒。 0
showArrow @Input boolean 隐藏/显示滑块箭头按钮 true
arrowKeyMove @Input boolean 禁用滑块和弹出图像在箭头按键事件上的向左/向右移动,如果值为 false true
videoAutoPlay @Input boolean 自动播放弹出视频 false
direction @Input string 设置文字方向。您可以通过rtl / ltr / auto ltr
imageClick @Output n/a 在滑块图像上单击事件时执行。返回图像索引。 n/a
arrowClick @Output n/a 单击滑块左/右箭头时执行。 n/a
lightboxClose @Output n/a 灯箱关闭时执行。 n/a
lightboxArrowClick @Output n/a 单击灯箱的下一个/上一个箭头时执行。 n/a