diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md
new file mode 100644
index 00000000000..11ad78cff43
--- /dev/null
+++ b/components/carousel/demo/position.md
@@ -0,0 +1,16 @@
+---
+order: 1
+title:
+ zh-CN: 位置
+ en-US: Position
+---
+
+## zh-CN
+
+位置有 4 个方向。
+
+## en-US
+
+There are four positions available.
+
+
diff --git a/components/carousel/demo/position.ts b/components/carousel/demo/position.ts
new file mode 100644
index 00000000000..dae62335776
--- /dev/null
+++ b/components/carousel/demo/position.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-carousel-position',
+ template: `
+
+
+
+
+
+
+
+
+
{{ index }}
+
+
+ `,
+ styles: [
+ `
+ nz-radio-group {
+ margin-bottom: 8px;
+ }
+
+ [nz-carousel-content] {
+ text-align: center;
+ height: 160px;
+ line-height: 160px;
+ background: #364d79;
+ color: #fff;
+ overflow: hidden;
+ }
+
+ h3 {
+ color: #fff;
+ }
+ `
+ ]
+})
+export class NzDemoCarouselPositionComponent {
+ array = [1, 2, 3, 4];
+ dotPosition = 'bottom';
+}
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
deleted file mode 100644
index 128ea70986c..00000000000
--- a/components/carousel/demo/vertical.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-order: 1
-title:
- zh-CN: 垂直
- en-US: Vertical
----
-
-## zh-CN
-
-垂直显示。
-
-## en-US
-
-Vertical pagination.
-
-
diff --git a/components/carousel/demo/vertical.ts b/components/carousel/demo/vertical.ts
deleted file mode 100644
index 3c7788deb72..00000000000
--- a/components/carousel/demo/vertical.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'nz-demo-carousel-vertical',
- template: `
-
-
-
{{ index }}
-
-
- `,
- styles: [
- `
- [nz-carousel-content] {
- text-align: center;
- height: 160px;
- line-height: 160px;
- background: #364d79;
- color: #fff;
- overflow: hidden;
- }
-
- h3 {
- color: #fff;
- }
- `
- ]
-})
-export class NzDemoCarouselVerticalComponent {
- array = [1, 2, 3];
-}
diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md
index 983cc585978..ca969a3b8f4 100644
--- a/components/carousel/doc/index.en-US.md
+++ b/components/carousel/doc/index.en-US.md
@@ -24,17 +24,17 @@ import { NzCarouselModule } from 'ng-zorro-antd';
### nz-carousel
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` |
-| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` |
-| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - |
-| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` |
-| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` |
-| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` |
-| `[nzVertical]` | Whether to use a vertical display | `boolean` | `false` |
-| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - |
-| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | - |
+| Property | Description | Type | Default | Version since |
+| -------- | ----------- | ---- | ------- | ------------- |
+| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | |
+| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | |
+| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | |
+| `[nzDotPosition]` | The position of the dots, which can be one of `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 |
+| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | |
+| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | |
+| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | |
+| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - | |
+| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | |
#### Methods
diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md
index 9f3130b7bad..c77c5df62de 100644
--- a/components/carousel/doc/index.zh-CN.md
+++ b/components/carousel/doc/index.zh-CN.md
@@ -25,17 +25,17 @@ import { NzCarouselModule } from 'ng-zorro-antd';
### nz-carousel
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` |
-| `[nzAutoPlaySpeed]` | 切换时间(毫秒),当设置为0时不切换 | `number` | `3000` |
-| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - |
-| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` |
-| `[nzEffect]` | 动画效果函数,可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` |
-| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` |
-| `[nzVertical]` | 垂直显示 | `boolean` | `false` |
-| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter` | - |
-| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | |
+| `[nzAutoPlaySpeed]` | 切换时间(毫秒),当设置为0时不切换 | `number` | `3000` | |
+| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - | |
+| `[nzDotPosition]` | 面板指示点位置,可选 `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 | |
+| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | |
+| `[nzEffect]` | 动画效果函数,可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | |
+| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | |
+| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter` | - | |
+| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | |
#### 方法
diff --git a/components/carousel/nz-carousel-definitions.ts b/components/carousel/nz-carousel-definitions.ts
index 6056bde54a6..6f884fd1f2b 100644
--- a/components/carousel/nz-carousel-definitions.ts
+++ b/components/carousel/nz-carousel-definitions.ts
@@ -10,19 +10,28 @@ import { InjectionToken, QueryList } from '@angular/core';
import { NzCarouselContentDirective } from './nz-carousel-content.directive';
import { NzCarouselBaseStrategy } from './strategies/base-strategy';
-// Support string for custom transition effect.
export type NzCarouselEffects = 'fade' | 'scrollx' | string;
+export type NzCarouselDotPosition = 'top' | 'bottom' | 'left' | 'right';
export interface NzCarouselComponentAsSource {
carouselContents: QueryList;
el: HTMLElement;
nzTransitionSpeed: number;
- nzVertical: boolean;
+ vertical: boolean;
slickListEl: HTMLElement;
slickTrackEl: HTMLElement;
activeIndex: number;
}
+export interface NzCarouselStrategyRegistryItem {
+ name: string;
+ strategy: NzCarouselBaseStrategy;
+}
+
+export const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken(
+ 'nz-carousel-custom-strategies'
+);
+
export interface PointerVector {
x: number;
y: number;
@@ -32,12 +41,3 @@ export interface FromToInterface {
from: number;
to: number;
}
-
-export interface CarouselStrategyRegistryItem {
- name: string;
- strategy: NzCarouselBaseStrategy;
-}
-
-export const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken(
- 'nz-carousel-custom-strategies'
-);
diff --git a/components/carousel/nz-carousel.component.html b/components/carousel/nz-carousel.component.html
index f00c2e4199e..d4ad344af56 100755
--- a/components/carousel/nz-carousel.component.html
+++ b/components/carousel/nz-carousel.component.html
@@ -13,7 +13,14 @@
-
+
- ();
@Output() readonly nzAfterChange = new EventEmitter();
@@ -102,6 +132,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
slickListEl: HTMLElement;
slickTrackEl: HTMLElement;
strategy: NzCarouselBaseStrategy;
+ vertical = false;
transitionInProgress: number | null;
private destroy$ = new Subject();
@@ -114,12 +145,12 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
constructor(
elementRef: ElementRef,
- @Inject(DOCUMENT) document: any, // tslint:disable-line:no-any
private renderer: Renderer2,
private cdr: ChangeDetectorRef,
private ngZone: NgZone,
private platform: Platform,
- @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: CarouselStrategyRegistryItem[]
+ @Inject(DOCUMENT) document: any, // tslint:disable-line:no-any
+ @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: NzCarouselStrategyRegistryItem[]
) {
this.document = document;
this.renderer.addClass(elementRef.nativeElement, 'ant-carousel');
@@ -165,7 +196,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
}
ngOnChanges(changes: SimpleChanges): void {
- const { nzEffect } = changes;
+ const { nzEffect, nzDotPosition } = changes;
if (nzEffect && !nzEffect.isFirstChange()) {
this.switchStrategy();
@@ -173,6 +204,12 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
this.syncStrategy();
}
+ if (nzDotPosition && !nzDotPosition.isFirstChange()) {
+ this.switchStrategy();
+ this.markContentActive(0);
+ this.syncStrategy();
+ }
+
if (!this.nzAutoPlay || !this.nzAutoPlaySpeed) {
this.clearScheduledTransition();
} else {
diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
index 6e4294ce61a..2288fa9ed52 100644
--- a/components/carousel/nz-carousel.spec.ts
+++ b/components/carousel/nz-carousel.spec.ts
@@ -18,6 +18,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy';
[nzEffect]="effect"
[nzVertical]="vertical"
[nzDots]="dots"
+ [nzDotPosition]="dotPosition"
[nzDotRender]="dotRender"
[nzAutoPlay]="autoPlay"
[nzAutoPlaySpeed]="autoPlaySpeed"
@@ -36,6 +37,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy';
export class NzTestCarouselBasicComponent {
@ViewChild(NzCarouselComponent, { static: false }) nzCarouselComponent: NzCarouselComponent;
dots = true;
+ dotPosition = 'bottom';
vertical = false;
effect = 'scrollx';
array = [1, 2, 3, 4];
@@ -135,6 +137,7 @@ describe('carousel', () => {
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
}));
+ // @deprecated 9.0.0
it('should vertical work', () => {
fixture.detectChanges();
@@ -149,6 +152,12 @@ describe('carousel', () => {
expect(carouselWrapper.nativeElement.firstElementChild!.classList).toContain('slick-vertical');
});
+ it('should nzDotPosition work', () => {
+ testComponent.dotPosition = 'left';
+ fixture.detectChanges();
+ expect(carouselWrapper.nativeElement.firstElementChild!.classList).toContain('slick-vertical');
+ });
+
it('should effect change work', fakeAsync(() => {
fixture.detectChanges();
tick(1000);
@@ -381,8 +390,9 @@ function tickMilliseconds(fixture: ComponentFixture, seconds: number = 1):
/*
* Swipe a carousel.
+ *
* @param carousel: Carousel component.
- * @Distance: Positive to right. Nagetive to left.
+ * @param Distance: Positive to right. Negative to left.
*/
function swipe(carousel: NzCarouselComponent, distance: number): void {
carousel.pointerDown(new MouseEvent('mousedown', { clientX: 500, clientY: 0 }));
diff --git a/components/carousel/strategies/transform-strategy.ts b/components/carousel/strategies/transform-strategy.ts
index 287e634fcd7..640bdd1c24a 100644
--- a/components/carousel/strategies/transform-strategy.ts
+++ b/components/carousel/strategies/transform-strategy.ts
@@ -19,7 +19,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
private isTransitioning = false;
private get vertical(): boolean {
- return this.carouselComponent!.nzVertical;
+ return this.carouselComponent!.vertical;
}
dispose(): void {
@@ -34,8 +34,10 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
const activeIndex = carousel.activeIndex;
if (this.contents.length) {
+ this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`);
+
if (this.vertical) {
- this.renderer.setStyle(this.slickListEl, 'height', `${this.unitHeight}px`);
+ this.renderer.setStyle(this.slickTrackEl, 'width', `${this.unitWidth}px`);
this.renderer.setStyle(this.slickTrackEl, 'height', `${this.length * this.unitHeight}px`);
this.renderer.setStyle(
this.slickTrackEl,
@@ -43,6 +45,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
`translate3d(0, ${-activeIndex * this.unitHeight}px, 0)`
);
} else {
+ this.renderer.setStyle(this.slickTrackEl, 'height', `${this.unitHeight}px`);
this.renderer.setStyle(this.slickTrackEl, 'width', `${this.length * this.unitWidth}px`);
this.renderer.setStyle(this.slickTrackEl, 'transform', `translate3d(${-activeIndex * this.unitWidth}px, 0, 0)`);
}
@@ -50,6 +53,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
this.contents.forEach((content: NzCarouselContentDirective) => {
this.renderer.setStyle(content.el, 'position', 'relative');
this.renderer.setStyle(content.el, 'width', `${this.unitWidth}px`);
+ this.renderer.setStyle(content.el, 'height', `${this.unitHeight}px`);
});
}
}
@@ -58,7 +62,11 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
const { to: t } = this.getFromToInBoundary(_f, _t);
const complete$ = new Subject();
- this.renderer.setStyle(this.slickTrackEl, 'transition', 'transform 500ms ease');
+ this.renderer.setStyle(
+ this.slickTrackEl,
+ 'transition',
+ `transform ${this.carouselComponent!.nzTransitionSpeed}ms ease`
+ );
if (this.vertical) {
this.verticalTransform(_f, _t);
@@ -97,7 +105,7 @@ export class NzCarouselTransformStrategy extends NzCarouselBaseStrategy {
const activeIndex = this.carouselComponent!.activeIndex;
- if (this.carouselComponent!.nzVertical) {
+ if (this.carouselComponent!.vertical) {
if (!this.isDragging && this.length > 2) {
if (activeIndex === this.maxIndex) {
this.prepareVerticalContext(true);