dockleryxk / ng-simple-slideshow

A simple, responsive slideshow for Angular 4+.

Hi

ng-simple-slideshow's Issues

Test on Angular 6 and update peer dependencies

Just leaving this here as a to do and to let anyone wondering know that I will be doing this sooner than later.

How to change the styling of elements?

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?

Min-height can't be set.

Min-height can't be set, so on low resolution screens it don't adjust correctly.

CSS doesn't minify

I need to upgrade ng-packagr and the configuration

Auto play stops when I click right or left arrow buttons

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.

Property 'goToSlide' does not exist on type 'ElementRef

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'.

Images get cut off

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 '

how to add local image urls

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?

Event Handlers Not Binding on autoplay (or at all?)

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

Spinner shows after first slide on lazy load no matter what

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.

Autoplay blocks app from becoming stable

The intervals should be handled outside of the angular zone to allow the app change detection to become stable.

How can I use along with *ngFor ?

refresh images

Hi, is it possible to reload the images every time the carousel starts up again?
Thank you!

youtube videos

can ng-simple-slideshow be used to display a carousel of youtube videos? thanks

fullscreen slideshow config

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>

Error in slideshow.component.d.ts

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?

Is there any property to show more than 1 slide in slide view ?

Extend peer dependencies to Angular 7

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.

Positioning the caption

Hi,

Could you please advise how do I position the caption in the center of the slide?

regards,
Fayeeg

New output events: Current slide index change event

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.

The text "previous" and "next" are in the slideshow

how can i set animation when click on one of the sliders ?

{ url: 'assets/images/Fuel_Card_ss.jpg', clickAction: () => this.openFuel() }

openFuel() {
    this.screenSaverClass = 'turnOffScreensaver';
    this.router.navigate(['/home']);
  }

ERROR TypeError: Cannot set property 'selected' of undefined

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

documentation

how to implement in angular 4? what to import in module.ts

init error loading images use dot

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

Use trackBy Function for Performance

Add a function to track the slides by URL to increase performance.

Change background-size to contain over cover

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.

Needs to support Angular 4 and 5 simultaneously

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!

Customize Caption properties

1. How to increase font size of Caption?
2. Can we have another text block below the caption with different font & size?

Regards,

Binding imageUrls does not update slideshow properly

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:

ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.ts

Line 55 in 7f205e4

if(this.initial === true) this.urlCache = this.imageUrls;

And comparing only references here, which will be the same in cases when URLs are added as in the first example.

ng-simple-slideshow/src/app/modules/slideshow/slideshow.component.ts

Line 173 in 7f205e4

if(this.initial === true || this.urlCache !== this.imageUrls) {

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.

Zoom images

Hi, is it possible to allow user to zoom images shown with this component ?

Error import SlideshowModule

Slide not working in my project :-(

Show this error:

Cannot read property 'classList' of undefined

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).
  }
}

how to get current index of images?

Is it possible to add components instead of images

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 ?

How can i exit from slider on click event or stop it ?

Change the Color of the arrows and the dots

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.

background-image not set if the image path contains space

If the image path contains space the background-image property is not set, even if you encode the path before initializing the slideshow

Async binding throw an error on load

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.

href target set to _blank

Is it possible to tell the slideshow to open links in a new tab?

when i delete a picture from imageurls array, i get following error:

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)

Nice doc

@ViewChild() slideshow: any;

nice!

Cannot read property 'loaded' of undefined

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.

Does this supports videos

Does this support video?

Pause button for the slideshow

I couldn't find a way to pause the slideshow. Is this feature missing?

the images come between each other

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.

no docs on how to add captions or change css

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.

multiple autoPlayInterval values

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!

on initial load of slider if we click on first dot with stopAutoPlayOnSlide set as false, it stops working correctly(note: this happens only when slider just loads and hasn't removed hide-slides class from remaining slides)

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

css overrides

Is there a wat to override width height ans background-size via css?