Skip to content

Latest commit

 

History

History
153 lines (119 loc) · 12.2 KB

README.md

File metadata and controls

153 lines (119 loc) · 12.2 KB
Raw
 _  _      ___ _            _     ___ _ _    _        _
| \| |__ _/ __(_)_ __  _ __| |___/ __| (_)__| |___ __| |_  _____ __ __
| .` / _` \__ \ | '  \| '_ \ / -_)__ \ | / _` / -_|_-< ' \/ _ \ V  V /
|_|\_\__, |___/_|_|_|_| .__/_\___|___/_|_\__,_\___/__/_||_\___/\_/\_/
     |___/            |_|

Note (09/2019):

v1.3.0-beta.2 will be in beta until I update the way ng-packagr works. It is stable enough for production (it's what I am using with Angular Universal and Service Worker).

Also, I am looking for maintainers who also using this package in a production app. I have this requirement because I need maintainers who have a vested interest in the quality of this package. Thanks.

A simple slideshow for Angular 4+.

Click here the check out the demo. Click here the see the slideshow in production on a StoragePug client site, which is what I originally made this slideshow package for.

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:

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

A more complex example of how I use this in one of my own projects (full list of options in next section):

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

More Info on imageUrls

The imageUrls input can be an array of strings, however in order to enable slides to have links, captions, or custom click functions, you must use an object of type IImage instead of a string. For example usage, see here.

Options

Inputs

Option Required Default Type Description
imageUrls yes [] string[] or IImage[] array of image urls or IImage
height no '100%' string CSS height of slideshow
minHeight no string CSS min-height of slideshow
arrowSize no '30px' string length of arrow lines
showArrows no true boolean show or hide the arrows
disableSwiping no false boolean turn swipe detection on or off
autoPlay no false boolean turn autoPlay on or off
autoPlayInterval no 3333 number time in ms between autoPlay slides
stopAutoPlayOnSlide no true boolean stop autoPlay if slideshow is interacted with
autoPlayWaitForLazyLoad no true boolean autoplay to waits for images to lazy load before changing slides
backgroundSize no 'cover' string overwrite background-size property
backgroundPosition no 'center center' string overwrite background-position property
backgroundRepeat no 'no-repeat' string overwrite background-repeat property
showDots no false boolean show clickable dots at the bottom
dotColor no '#FFF' string color of clickable dots at the bottom
showCaptions no true boolean show or hide captions
captionColor no '#FFF' string color of caption text
captionBackground no 'rgba(0, 0, 0, .35)' string color of caption background
lazyLoad no false boolean turn on to lazy load images instead of preload
hideOnNoSlides no false boolean set the slideshow container display to none if imageUrls is empty, null, or undefined
fullscreen no false boolean activate full screen for the slideshow on true, go back to normal view on false
enableZoom no false boolean enable (2 point/pinch) touch zoom in/out on images
enablePan no false boolean enable (1 point) touch/click panning of images, NOTE: "true" will disable image on click actions
noLoop no false boolean block looping through slideshow like a circular list

Output Events

Event Description
onSlideLeft when the left arrow is clicked
onSlideRight when the right arrow is clicked
onSwipeLeft when a swipe left occurs
onSwipeRight when a swipe right occurs
onFullscreenExit when fullscreen exits
onIndexChanged when slide index changes
onImageLazyLoad when slide image lazy loads
onClick when slide (not arrows) is clicked

Note: all events emit the index number of the new slide, with the exception of onClick which returns the slide object in addition to the index.

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: any;

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