Home Angular A Simple, Responsive Slideshow for Angular 4+

A Simple, Responsive Slideshow for Angular 4+

Angular webcodeflow · July 8, 2022 · Comments off

ng-simple-slideshow is a simple and elegant slideshow slider element for the Angular 4+ app.

angular material image carousel slider, angular material image slider, automatic image slider in angular, angular image slider with thumbnails

Features

NgSimpleSlideshow has no dependencies besides Angle. All animations are 100% CSS, so there is no need for @angular/animations.
Compiled and packaged in Angular Package Format v4.0 with ng package.
This package is compiled to es5 and is compatible with Angular Universal.
AOT ready.
Responds and picks up swipes from phones and tablets.
Lazy loading option to help speed initial page loading.

How to make use of it:

Installation:

npm i -S ng-simple-slideshow

1. Next, import the module:

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

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

2. Usage

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

<slideshow [height]="height"
           [minHeight]="'525px'"
           [autoPlay]="true"
           [showArrows]="false"
           [imageUrls]="imageSources"
           [lazyLoad]="imageSources?.length > 1"
           [autoPlayWaitForLazyLoad]="true">
</slideshow>