diff --git a/src/components/carousel/nz-carousel-content.directive.ts b/src/components/carousel/nz-carousel-content.directive.ts
index e9fec5811a..eb0658cc2b 100755
--- a/src/components/carousel/nz-carousel-content.directive.ts
+++ b/src/components/carousel/nz-carousel-content.directive.ts
@@ -1,7 +1,9 @@
import {
Directive,
- HostBinding
+ HostBinding,
+ ElementRef
} from '@angular/core';
+
@Directive({
selector: '[nz-carousel-content]',
})
@@ -10,7 +12,9 @@ export class NzCarouselContentDirective {
isActive = false;
left = null;
top = null;
- fadeMode = false;
+ fadeMode = false
+ nativeElement: HTMLElement;
+
@HostBinding('class.slick-slide') _nzSlickSlide = true;
@@ -48,4 +52,8 @@ export class NzCarouselContentDirective {
}
}
+ constructor(private _el: ElementRef) {
+ this.nativeElement = this._el.nativeElement;
+ }
+
}
diff --git a/src/components/carousel/nz-carousel.component.ts b/src/components/carousel/nz-carousel.component.ts
index cca79dd30a..012e2e42e6 100755
--- a/src/components/carousel/nz-carousel.component.ts
+++ b/src/components/carousel/nz-carousel.component.ts
@@ -37,7 +37,14 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
activeIndex = 0;
transform = 'translate3d(0px, 0px, 0px)';
interval;
- @ContentChildren(NzCarouselContentDirective) slideContents;
+ slideContents;
+
+ @ContentChildren(NzCarouselContentDirective)
+ set _slideContents(value) {
+ this.slideContents = value;
+ this.renderContent();
+ }
+
@ViewChild('slickList') slickList: ElementRef;
@ViewChild('slickTrack') slickTrack: ElementRef;
@Input() nzAutoPlay = false;
@@ -67,8 +74,14 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
}
ngAfterViewInit() {
+ this.renderContent();
+ }
+
+ renderContent() {
setTimeout(_ => {
- this.slideContents.first.isActive = true;
+ if (this.slideContents.first) {
+ this.slideContents.first.isActive = true;
+ }
this.slideContents.forEach((content, i) => {
content.width = this.hostElement.nativeElement.offsetWidth;
if (this.nzEffect === 'fade') {
@@ -83,14 +96,21 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy {
if (this.nzAutoPlay) {
this.createInterval();
}
- this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.hostElement.nativeElement.offsetHeight}px`);
+
if (this.nzVertical) {
+ this._renderer.removeStyle(this.slickList.nativeElement, 'height');
+ if (this.slideContents.first) {
+ this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.slideContents.first.nativeElement.offsetHeight}px`);
+ }
+ this._renderer.removeStyle(this.slickTrack.nativeElement, 'height');
this._renderer.setStyle(this.slickTrack.nativeElement, 'height', `${this.slideContents.length * this.hostElement.nativeElement.offsetHeight}px`);
} else {
+ this._renderer.removeStyle(this.slickList.nativeElement, 'height');
+ this._renderer.setStyle(this.slickList.nativeElement, 'height', `${this.hostElement.nativeElement.offsetHeight}px`);
+ this._renderer.removeStyle(this.slickTrack.nativeElement, 'width');
this._renderer.setStyle(this.slickTrack.nativeElement, 'width', `${this.slideContents.length * this.hostElement.nativeElement.offsetWidth}px`);
}
})
-
}
createInterval() {
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
index 6572392ee4..961bf763b9 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-auto.component.ts
@@ -1,12 +1,10 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
selector: 'nz-demo-carousel-auto',
template: `
- 1
- 2
- 3
- 4
+ {{index}}
`,
styles : [
`:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,6 +15,7 @@ import { Component, OnInit } from '@angular/core';
color: #fff;
overflow: hidden;
}
+
h3 {
color: #fff;
}
@@ -24,10 +23,14 @@ import { Component, OnInit } from '@angular/core';
]
})
export class NzDemoCarouselAutoComponent implements OnInit {
+ array = [ 1 ];
constructor() {
}
ngOnInit() {
+ setTimeout(_ => {
+ this.array = [ 1, 2, 3, 4 ];
+ }, 500)
}
}
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
index 0e2241ab5a..657f9a12c1 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-basic.component.ts
@@ -1,12 +1,10 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
selector: 'nz-demo-carousel-basic',
template: `
- 1
- 2
- 3
- 4
+ {{index}}
`,
styles : [
`:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,6 +15,7 @@ import { Component, OnInit } from '@angular/core';
color: #fff;
overflow: hidden;
}
+
h3 {
color: #fff;
}
@@ -24,10 +23,14 @@ import { Component, OnInit } from '@angular/core';
]
})
export class NzDemoCarouselBasicComponent implements OnInit {
+ array = [ 1, 2, 3 ];
constructor() {
}
ngOnInit() {
+ setTimeout(_ => {
+ this.array = [ 1, 2, 3, 4 ];
+ }, 500)
}
}
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
index 7bfeda13f8..398ef8e260 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-fade.component.ts
@@ -3,10 +3,7 @@ import { Component, OnInit } from '@angular/core';
selector: 'nz-demo-carousel-fade',
template: `
- 1
- 2
- 3
- 4
+ {{index}}
`,
styles : [
`:host ::ng-deep .ant-carousel .slick-slide {
@@ -24,10 +21,13 @@ import { Component, OnInit } from '@angular/core';
]
})
export class NzDemoCarouselFadeComponent implements OnInit {
-
+ array = [];
constructor() {
}
ngOnInit() {
+ setTimeout(_ => {
+ this.array = [ 1, 2, 3, 4 ];
+ }, 500)
}
}
diff --git a/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts b/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
index ab0e007c8f..eba122b654 100644
--- a/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
+++ b/src/showcase/nz-demo-carousel/nz-demo-carousel-vertical.component.ts
@@ -1,12 +1,10 @@
import { Component, OnInit } from '@angular/core';
+
@Component({
selector: 'nz-demo-carousel-vertical',
template: `
- 1
- 2
- 3
- 4
+ {{index}}
`,
styles : [
`:host ::ng-deep .ant-carousel .slick-slide {
@@ -17,6 +15,7 @@ import { Component, OnInit } from '@angular/core';
color: #fff;
overflow: hidden;
}
+
h3 {
color: #fff;
}
@@ -24,10 +23,14 @@ import { Component, OnInit } from '@angular/core';
]
})
export class NzDemoCarouselVerticalComponent implements OnInit {
+ array = [ 1, 2, 3 ]; // try dynamic change the array
constructor() {
}
ngOnInit() {
+ setTimeout(() => {
+ this.array = [ 1, 2, 3, 4 ];
+ }, 500)
}
}