JSPM

 _  _      ___ _            _     ___ _ _    _        _
| \| |__ _/ __(_)_ __  _ __| |___/ __| (_)__| |___ __| |_  _____ __ __
| .` / _` \__ \ | '  \| '_ \ / -_)__ \ | / _` / -_|_-< ' \/ _ \ V  V /
|_|\_\__, |___/_|_|_|_| .__/_\___|___/_|_\__,_\___/__/_||_\___/\_/\_/
     |___/            |_|

A simple slideshow for Angular 4+.

Click here the check out the demo.

Features

• NgSimpleSlideshow has no dependencies besides angular. All animations are 100% CSS, so @angular/animations is not needed.
• Compiled and packaged in the Angular Package Format v4.0 with ng-packagr.
• Compiled to es5, so this package is compatible with Angular Universal.
• AOT ready
• Responsive and captures swipes from phones and tablets
• Lazy load option to help with initial pageload speed

Installation

Easy, just npm install:

npm i -S ng-simple-slideshow

Next, import the module:

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

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

Usage

The simplest use case is the following, but the full list of options is below:

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

Options

Inputs

Output Events

Note: all events emit the index number of the new slide

API

Take control of the slideshow if you want! Simply create a reference to your slideshow like so:

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

and in your component.ts reference it as a ViewChild:

@ViewChild('slideshow') slideshow: ElementRef;

Now you can access the public members such as the goToSlide and onSlide:

this.slideshow.goToSlide(3); // go to slide index 3 (i.e. imageUrls[3])

this.slideshow.onSlide(1); // next slide

this.slideshow.onSlide(-1); // previous slide