Gathering detailed insights and metrics for ng-simple-slideshow
Gathering detailed insights and metrics for ng-simple-slideshow
Installations
npm install ng-simple-slideshowDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
11.6.0
NPM Version
6.9.0
Releases
Unable to fetch releases
Languages
4
TypeScript
HTML
CSS
JavaScript
TypeScript (72.21%)
HTML (14.55%)
CSS (10.69%)
JavaScript (2.55%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
122 Stars
231 Commits
77 Forks
5 Watchers
30 Branches
12 Contributors
Updated on Feb 23, 2025
Maintainers
1
Package Meta Information
Latest Version
1.2.9
Package Id
ng-simple-slideshow@1.2.9
Unpacked Size
375.85 kB
Size
73.21 kB
File Count
20
NPM Version
6.9.0
Node Version
11.6.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
1 _ _ ___ _ _ ___ _ _ _ _ 2| \| |__ _/ __(_)_ __ _ __| |___/ __| (_)__| |___ __| |_ _____ __ __ 3| .` / _` \__ \ | ' \| '_ \ / -_)__ \ | / _` / -_|_-< ' \/ _ \ V V / 4|_|\_\__, |___/_|_|_|_| .__/_\___|___/_|_\__,_\___/__/_||_\___/\_/\_/ 5 |___/ |_|
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:
1npm 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:
1<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):
1<slideshow [height]="height" 2 [minHeight]="'525px'" 3 [autoPlay]="true" 4 [showArrows]="false" 5 [imageUrls]="imageSources" 6 [lazyLoad]="imageSources?.length > 1" 7 [autoPlayWaitForLazyLoad]="true"> 8</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:
1<slideshow #slideshow [imageUrls]="imageUrlArray"></slideshow>
and in your component.ts reference it as a ViewChild:
1@ViewChild('slideshow') slideshow: any;
Now you can access the public members such as the goToSlide and onSlide:
1this.slideshow.goToSlide(3); // go to slide index 3 (i.e. imageUrls[3])
1this.slideshow.onSlide(1); // next slide
1this.slideshow.onSlide(-1); // previous slide
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/29 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Reason
160 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-3v6h-hqm4-2rg6
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48
- Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-779f-wgxg-qr8f
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-qm28-7hqv-wg5j
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-q75g-2496-mxpp
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-884p-74jh-xrg2
- Warn: Project is vulnerable to: GHSA-j7fq-p9q7-5wfv
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-4fc4-chg7-h8gh
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More