Angular 4+漂亮滑块/幻灯片组件– NgSimpleSlideshow

Angular 4+漂亮滑块/幻灯片组件– NgSimpleSlideshow
插件名称 ng-simple-slideshow
发布时间 2020年7月14日
插件作者 dockleryxk

NgSimpleSlideshow是用于Angular 4+应用程序的简单,优雅的滑块和幻灯片组件。

安装:

# NPM
$ npm install ng-simple-slideshow --save

用法:

将NgSimpleSlideshow导入到您的模块中。

import {SlideshowModule} from 'ng-simple-slideshow';

@NgModule({
  imports: [
    SlideshowModule,
  ],
  declarations: [
  ],
  exports: [
  ]
})

在您的应用中。

<slideshow [imageUrls]="imageUrlArray"></slideshow>

选项。

@Input() imageUrls: string[];
@Input() height: string;
@Input() minHeight: string;
@Input() arrowSize: string;
@Input() showArrows: boolean = true;
@Input() disableSwiping: boolean = false;
@Input() autoPlay: boolean = false;
@Input() autoPlayInterval: number = 3333;
@Input() stopAutoPlayOnSlide: boolean = true;
@Input() debug: boolean = false;

事件。

@Output('onSlideLeft') public onSlideLeft = new EventEmitter<number>();
@Output('onSlideRight') public onSlideRight = new EventEmitter<number>();
@Output('onSwipeLeft') public onSwipeLeft = new EventEmitter<number>();
@Output('onSwipeRight') public onSwipeRight = new EventEmitter<number>();