Hi
dockleryxk / ng-simple-slideshow Goto Github PK
View Code? Open in Web Editor NEWA simple, responsive slideshow for Angular 4+.
Home Page: https://ng-simple-slideshow.firebaseapp.com/
License: MIT License
A simple, responsive slideshow for Angular 4+.
Home Page: https://ng-simple-slideshow.firebaseapp.com/
License: MIT License
Hi
Example
If slideshow is added to html as following:
<slideshow [imageUrls]="model.imgLinks"></slideshow>
and imgLinks in model is modified as following
this.model.imgLinks.push(url);
changes are noticed, but new image is not added to slideshow. If imgLinks are modified as following
this.model.imgLinks.push(result.url);
const oldArray = this.model.imgLinks;
// Creating a new array
// because of a bug in library
// where array reference is compared, instead of actual array contents
this.model.imgLinks = [];
for (const item of oldArray) {
this.model.imgLinks.push(item);
}
slideshow is properly updated.
Issue
After checking code of library, it seems that the way urlCache
works is the issue. It is set to reference of the array passed to component here:
And comparing only references here, which will be the same in cases when URLs are added as in the first example.
Solution
If actual contents of the array were copied to cache and then compared when array is changed, this would work as expected. I don't know if it make a performance hit, but it seems like a very small operation. If you agree, I can make a PR.
Is it possible to tell the slideshow to open links in a new tab?
I managed to install and run your code successfully in the browser using an array of strings for imageUrls. However am getting Type Error in the console:
Uncaught TypeError: Cannot read property 'loaded' of undefined at ng-simple-slideshow.es5.js:437 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498) at ZoneTask.invoke (zone.js:487) at timer (zone.js:2281)
I am using simple-slideshow in angular 7 with the following tag:
<slideshow [imageUrls]="imageSources" [height]="'100%'" [backgroundSize]="'cover'" [backgroundPosition]="'center center'" [autoPlay]="false" [showArrows]="true" [lazyLoad]="imageSources?.length > 1" [autoPlayWaitForLazyLoad]="true" [stopAutoPlayOnSlide]="true" [autoPlayInterval]="5000" [showDots]="false" style="width:1200px"></slideshow>
Using the default <slideshow [imageUrls]="imageUrlArray"></slideshow>
tag produces the same error.
My imageUrls is an array of strings.
I tried to add the local image urls but seems it not working. Is it required to use the hosted image urls and not the images inside the application images folder?
Min-height can't be set, so on low resolution screens it don't adjust correctly.
I couldn't find a way to pause the slideshow. Is this feature missing?
{ url: 'assets/images/Fuel_Card_ss.jpg', clickAction: () => this.openFuel() }
openFuel() {
this.screenSaverClass = 'turnOffScreensaver';
this.router.navigate(['/home']);
}
Example
my.component.html
<slideshow [imageUrls]="images | async" autoPlay="true" showDots="true"></slideshow>
my.component.ts
export class MyComponent {
public images: Observable<string[]> = new Observable<string[]>();
constructor(apiService: SlideApiService) {
this.images = apiService.getSlides();
}
}
slide.api.service.ts
public getSlides(): Observable<string[]> {
return this.http.get<string[]>(this.baseUrl + 'api/Slides')
.pipe(retry(3), catchError(this.handleError));
}
Issue
ERROR TypeError: Cannot read property 'length' of null
at SlideshowComponent.setSlides (ng-simple-slideshow.es5.js:223)
at SlideshowComponent.ngOnChanges (ng-simple-slideshow.es5.js:80)
ng-simple-slideshow.es5.js
private setSlides(): void {
...
for (var _i = 0, _a = this.imageUrls; _i < _a.length; _i++) {
...
}
...
}
Suggested solution
Add an exit condition to setSlides function if this.imageUrls
is null.
Anyone knows why below example with height 100% don't work? Thanks.
<slideshow [height]="'100%'"
[autoPlay]="true"
[imageUrls]="imageUrlArray"
[lazyLoad]="imageUrlArray?.length > 1"
[autoPlayWaitForLazyLoad]="true">
</slideshow>
I add slideshow component to my component.html file as following:
<slideshow [imageUrls]="imageSources" [autoPlay]="true" [height]="800"></slideshow>
I start website with:
ng serve --open
Issue:
In the first opening of web site the slideshow slides normally, when I click right arrow it slides next image but autoplay stops. I expect it to keep sliding.
I need to upgrade ng-packagr and the configuration
ERROR TypeError: Cannot set property 'selected' of undefined at SlideshowComponent.buildSlideArray (ng-simple-slideshow.es5.js:325) at SlideshowComponent.setSlides (ng-simple-slideshow.es5.js:280) at SlideshowComponent.ngDoCheck (ng-simple-slideshow.es5.js:95) at checkAndUpdateDirectiveInline (core.js:12372) at checkAndUpdateNodeInline (core.js:13893) at checkAndUpdateNode (core.js:13836) at debugCheckAndUpdateNode (core.js:14729) at debugCheckDirectivesFn (core.js:14670) at Object.eval [as updateDirectives] (DetailProductsComponent.html:3) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655) View_DetailProductsComponent_0 @ DetailProductsComponent.html:3 proxyClass @ compiler.js:14653 DebugContext_.logError @ core.js:14996 ErrorHandler.handleError @ core.js:1509 (anonymous) @ core.js:5914 ZoneDelegate.invoke @ zone.js:388 Zone.run @ zone.js:138 NgZone.runOutsideAngular @ core.js:4697 ApplicationRef.tick @ core.js:5914 (anonymous) @ core.js:5740 ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:4749 ZoneDelegate.invoke @ zone.js:387 Zone.run @ zone.js:138 NgZone.run @ core.js:4566 next @ core.js:5740 schedulerFn @ core.js:4331 SafeSubscriber.__tryOrUnsub @ Subscriber.js:240 SafeSubscriber.next @ Subscriber.js:187 Subscriber._next @ Subscriber.js:128 Subscriber.next @ Subscriber.js:92 Subject.next @ Subject.js:56 EventEmitter.emit @ core.js:4311 checkStable @ core.js:4714 onHasTask @ core.js:4762 ZoneDelegate.hasTask @ zone.js:441 ZoneDelegate._updateTaskCount @ zone.js:461 Zone._updateTaskCount @ zone.js:285 Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask @ zone.js:578 ZoneDelegate.scheduleTask @ zone.js:410 Zone.scheduleTask @ zone.js:232 Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:856 ZoneAwarePromise.then @ zone.js:946 PlatformRef.bootstrapModule @ core.js:5568 (anonymous) @ main.ts:13 ./src/main.ts @ main.bundle.js:613 __webpack_require__ @ inline.bundle.js:55 0 @ main.bundle.js:621 __webpack_require__ @ inline.bundle.js:55 webpackJsonpCallback @ inline.bundle.js:26 (anonymous) @ main.bundle.js:1
i'm trying to use simple slideshow in Angular 5.2.9, CLI 1.7.3, Node 9.10.1 but got the error
Hi,
Could you please advise how do I position the caption in the center of the slide?
regards,
Fayeeg
It would be great to have a slide index change event. This could also be used to check initialisation from no image to some images being shown.
The slideLeft and slideRight does not fire when image is newly added to an empty array.
Hi
the slide work good but when i refresh page click in the first after second slide, in order all work fine, but if i refresh page and click in the third dot the slide go crazy, also in your example
https://ng-simple-slideshow.firebaseapp.com/
How i fix this bug?
Thanks
Regards
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(81,19): error TS1005: '=' expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(81,26): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(82,19): error TS1005: '=' expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(82,25): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(83,19): error TS1005: '=' expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(83,29): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(84,19): error TS1005: '=' expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(84,27): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(91,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(91,43): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(96,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(104,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(104,41): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(112,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(112,42): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(116,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(121,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(125,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(130,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(135,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(140,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(140,41): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(144,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(148,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(154,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(154,32): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(160,5): error TS1128: Declaration or statement expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(160,33): error TS1109: Expression expected.
node_modules/ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.d.ts(161,1): error TS1128: Declaration or statement expected.```
I got this error on new project, any thoughts why?
I get this error message when using the example from the API section on the NPM page:
ERROR in src/app/decision-ui/decision-ui.component.ts(51,20): error TS2339: Property 'goToSlide' does not exist on type 'ElementRef'.
src/app/decision-ui/decision-ui.component.ts(57,20): error TS2339: Property 'goToSlide' does not exist on type 'ElementRef'.
If lazy loading is enabled, the spinner will show for a split second after the first slide change even if the image is immediately loaded.
I haven't figured out how to prevent this from happening without blocking the page from completing loading first.
It is amazing your plugin.
But I have found when I try use viewchild as you teach, I get this error.
This is my code:
<div class="w-100 m-auto position-relative">
<slideshow #slideshow
[height]="'300px'"
[minHeight]="'300px'"
[imageUrls]="imageSources"
[autoPlay]="true"
[showDots]="true"
[showCaptions]="true"
[captionBackground]="'rgba(0,0,0,0)'">
</slideshow>
</div>
and component.ts is:
import { Component, ViewChild, Renderer2 } from '@angular/core';
import { IImage } from 'ng-simple-slideshow';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string;
imageSources: (string | IImage)[];
now: Date = new Date();
@ViewChild('slideshow') slideshow: any;
constructor(
private renderer: Renderer2,
) {
this.title = 'Tarot Vida';
this.imageSources = [
{ url: 'assets/imagenes/tarot-vida-4.jpg',
caption: 'Oráculo del Tarot',
href: '#'},
{ url: 'assets/imagenes/tarot-vida-5.jpg',
caption: 'Oráculo del Tarot',
href: '#'}
];
setInterval(() => {
this.now = new Date();
}, 1);
this.renderer.addClass(this.slideshow.goToSlide(1), 'top-caption');
// this.slideshow.goToSlide(1).
}
}
Does this support video?
If the image path contains space the background-image property is not set, even if you encode the path before initializing the slideshow
Regards,
I start the component in image 0 and I have four images in the slide when I use the goToSlide (i) method, where i is equal to for example 3, image 2 and image 3 are shown at the same time.
The 2 is shown automatically, and the third enters with the effect of the slide.
how to implement in angular 4? what to import in module.ts
Hi, is it possible to assign a different auto play intervals?
For instance:
img1 --> 3000
img2 --> 5000
img3 --> 5000
img4 --> 10000
thanks for your support!
Just leaving this here as a to do and to let anyone wondering know that I will be doing this sooner than later.
I'm not able to override the styling of the elements. Say for example I want to remove the black gradient on hover of arrow buttons, I am not able to override that in the component css file.
Any help how to do that?
Hi, is it possible to reload the images every time the carousel starts up again?
Thank you!
can ng-simple-slideshow be used to display a carousel of youtube videos? thanks
@ViewChild() slideshow: any;
nice!
on initial load of slider if we click on first dot after it has moved to second or third dot with stopAutoPlayOnSlide set as false, it stops working correctly(note: this happens only when slider just loads and hasn't removed 'hide-slide' class from remaining slides).
A proposed solution would be to remove 'hide-slide' class and instead just provide those non selected class with 'right-slide' class but of course this is proposed as temporary hack and it would be better if you resolved it in your package internally
I can't seem to be able to target the arrows and the dots with my css properties. I would like to change the colors of the arrows and the dots to a different color.
ERROR TypeError: Cannot set property 'selected' of undefined
at SlideshowComponent.buildSlideArray (ng-simple-slideshow.es5.js:336)
at SlideshowComponent.setSlides (ng-simple-slideshow.es5.js:291)
at SlideshowComponent.ngDoCheck (ng-simple-slideshow.es5.js:97)
I can't seem to be able to target your slideshow with my own css properties. I would like to change the default background-size from cover to contain.
Hi, is it possible to allow user to zoom images shown with this component ?
Add a function to track the slides by URL to increase performance.
Currently this is "solved" by having a tag for Angular 4 builds. However, the only difference is that one package has an Angular 4 dependency while the other have an Angular 5 dependency.
I currently am not sure how to solve this, and don't have time to figure it out.
In the meantime if someone could offer some advice on how that would be great!
I've followed the examples, and I've gotten everything else working, but I'm having issues binding the onSlideLeft/Right etc. events. I've added the viewChild Entry and the # reference to the element on my template, but my onSlideLeft function (Was just logging the event to the console) never gets triggered.
I may just be completely missing something, am still fairly new to the newer versions of angular.
I'm using chrome, and angular 6.1.3
I am struggling to get this to work responsively on different device sizes!
I simply cannot get this to work on different device sizes without getting my images cut off. All I want it to do is to display the image in 100% width, and calculate the height automatically.
Edit: I finally found a solution using [backgroundSize]="'contain'"
, but it would be great if this could be added to the readme page. Especially the fact that is has to be 'contain'
, not just contain
, i.e. with the extra '
You show how to display captions or not, how to change their colors but you do not show how to add the text of captions or change their location within the slideshow please adjust docs to show thank you.
The intervals should be handled outside of the angular zone to allow the app change detection to become stable.
Is there a wat to override width height ans background-size via css?
I need a slideshow with charts, i create charts by using Ngx library..so is it possible to add component reference as the image URL ? how to use ?Any reference ?
npm WARN @agm/[email protected] requires a peer of @angular/common@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/[email protected] requires a peer of @angular/core@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.