feat(module:carousel): arrows for switching

components/carousel/carousel.component.ts

@@ -6,7 +6,7 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { Platform } from '@angular/cdk/platform';
-import { NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -66,6 +66,17 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'carousel';
       [class.slick-vertical]="nzDotPosition === 'left' || nzDotPosition === 'right'"
       [dir]="'ltr'"
     >
+      @if (nzArrows) {
+        <button
+          type="button"
+          aria-label="prev"
+          data-role="none"
+          class="slick-arrow slick-prev"
+          [ngStyle]="{ display: 'block' }"
+          [ngClass]="{ 'slick-disabled': activeIndex === 0 }"
+          (click)="pre()"
+        ></button>
+      }
       <div
         #slickList
         class="slick-list"
@@ -78,6 +89,17 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'carousel';
           <ng-content></ng-content>
         </div>
       </div>
+      @if (nzArrows) {
+        <button
+          type="button"
+          aria-label="next"
+          data-role="none"
+          class="slick-arrow slick-next"
+          [ngStyle]="{ display: 'block' }"
+          [ngClass]="{ 'slick-disabled': activeIndex === carouselContents.length - 1 }"
+          (click)="next()"
+        ></button>
+      }
       <!-- Render dots. -->
       @if (nzDots) {
         <ul
@@ -108,7 +130,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'carousel';
     '[class.ant-carousel-vertical]': 'vertical',
     '[class.ant-carousel-rtl]': `dir === 'rtl'`
   },
-  imports: [NgTemplateOutlet],
+  imports: [NgTemplateOutlet, NgStyle, NgClass],
   standalone: true
 })
 export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges, OnInit {
@@ -124,6 +146,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   @Input({ transform: booleanAttribute }) @WithConfig() nzEnableSwipe: boolean = true;
   @Input({ transform: booleanAttribute }) @WithConfig() nzDots: boolean = true;
   @Input({ transform: booleanAttribute }) @WithConfig() nzAutoPlay: boolean = false;
+  @Input({ transform: booleanAttribute }) @WithConfig() nzArrows: boolean = false;
   @Input({ transform: numberAttribute }) @WithConfig() nzAutoPlaySpeed: number = 3000;
   @Input({ transform: numberAttribute }) nzTransitionSpeed = 500;
   @Input() @WithConfig() nzLoop: boolean = true;

components/carousel/carousel.spec.ts

@@ -71,6 +71,34 @@ describe('carousel', () => {
       ).toBe('A');
     });
 
+    it('should have correct initial value for nzArrows', () => {
+      expect(testComponent.nzCarouselComponent.nzArrows).toBe(false);
+    });
+
+    it('should correctly render next and previous arrows if nzArrows is set', () => {
+      testComponent.nzArrows = true;
+      fixture.detectChanges();
+      expect(carouselWrapper.nativeElement.querySelectorAll('.slick-arrow').length).toBe(2);
+    });
+
+    it('should call correct method on next arrow click', () => {
+      spyOn(testComponent.nzCarouselComponent, 'next');
+      testComponent.nzArrows = true;
+      fixture.detectChanges();
+      const nextBtn = carouselWrapper.nativeElement.querySelectorAll('.slick-arrow')[1];
+      nextBtn!.click();
+      expect(testComponent.nzCarouselComponent.next).toHaveBeenCalled();
+    });
+
+    it('should call correct method on previous arrow click', () => {
+      spyOn(testComponent.nzCarouselComponent, 'pre');
+      testComponent.nzArrows = true;
+      fixture.detectChanges();
+      const previous = carouselWrapper.nativeElement.querySelectorAll('.slick-arrow')[0];
+      previous!.click();
+      expect(testComponent.nzCarouselComponent.pre).toHaveBeenCalled();
+    });
+
     it('should call layout on component resize', fakeAsync(() => {
       testComponent.nzCarouselComponent.ngOnInit();
       const spy = spyOn(testComponent.nzCarouselComponent, 'layout');
@@ -455,6 +483,7 @@ function swipe(carousel: NzCarouselComponent, distance: number): void {
       [nzAutoPlay]="autoPlay"
       [nzAutoPlaySpeed]="autoPlaySpeed"
       [nzLoop]="loop"
+      [nzArrows]="nzArrows"
       (nzAfterChange)="afterChange($event)"
       (nzBeforeChange)="beforeChange($event)"
     >
@@ -478,6 +507,7 @@ export class NzTestCarouselBasicComponent {
   autoPlay = false;
   autoPlaySpeed = 3000;
   loop = true;
+  nzArrows = false;
   afterChange = jasmine.createSpy('afterChange callback');
   beforeChange = jasmine.createSpy('beforeChange callback');
 }

components/carousel/demo/arrows.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 切换箭头
+  en-US: Arrows for switching
+---
+
+## zh-CN
+
+显示切换箭头。
+
+## en-US
+
+Show the arrows for switching.

components/carousel/demo/arrows.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+import { NzCarouselModule } from 'ng-zorro-antd/carousel';
+import { NzFlexDirective } from 'ng-zorro-antd/flex';
+
+@Component({
+  selector: 'nz-demo-carousel-arrows',
+  standalone: true,
+  imports: [NzCarouselModule, NzFlexDirective],
+  template: `
+    <nz-flex nzVertical nzGap="middle">
+      <nz-carousel [nzEnableSwipe]="false" [nzArrows]="true">
+        @for (index of array; track index) {
+          <div nz-carousel-content>
+            <h3>{{ index }}</h3>
+          </div>
+        }
+      </nz-carousel>
+
+      <nz-carousel [nzEnableSwipe]="false" [nzDotPosition]="'left'" [nzArrows]="true">
+        @for (index of array; track index) {
+          <div nz-carousel-content>
+            <h3>{{ index }}</h3>
+          </div>
+        }
+      </nz-carousel>
+    </nz-flex>
+  `,
+  styles: [
+    `
+      [nz-carousel-content] {
+        text-align: center;
+        height: 160px;
+        line-height: 160px;
+        background: #364d79;
+        color: #fff;
+        overflow: hidden;
+      }
+
+      h3 {
+        color: #fff;
+        margin-bottom: 0;
+        user-select: none;
+      }
+    `
+  ]
+})
+export class NzDemoCarouselArrowsComponent {
+  array = [1, 2, 3, 4];
+}

components/carousel/doc/index.en-US.md

@@ -31,6 +31,7 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 | `[nzEffect]`        | Transition effect                                                           | `'scrollx'\|'fade'`                         | `'scrollx'` | ✅            |
 | `[nzEnableSwipe]`   | Whether to support swipe gesture                                            | `boolean`                                   | `true`      | ✅            |
 | `[nzLoop]`          | Whether to enable the carousel to go in a loop                              | `boolean`                                   | `true`      | ✅            |
+| `[nzArrows]`        | Whether to show switch arrows                                               | `boolean`                                   | `false`     | ✅            |
 | `(nzAfterChange)`   | Callback function called after the current index changes                    | `EventEmitter<number>`                      | -           |
 | `(nzBeforeChange)`  | Callback function called before the current index changes                   | `EventEmitter{ from: number; to: number }>` | -           |
 

components/carousel/doc/index.zh-CN.md

@@ -32,6 +32,7 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 | `[nzEffect]`        | 动画效果函数，可取 `scrollx`, `fade`               | `'scrollx'\|'fade'`                          | `'scrollx'` | ✅           |
 | `[nzEnableSwipe]`   | 是否支持手势划动切换                               | `boolean`                                    | `true`      | ✅           |
 | `[nzLoop]`          | 是否支持循环                                       | `boolean`                                    | `true`      | ✅           |
+| `[nzArrows]`        | 是否显示箭头                                       | `boolean`                                    | `false`     | ✅           |
 | `(nzAfterChange)`   | 切换面板的回调                                     | `EventEmitter<number>`                       | -           |
 | `(nzBeforeChange)`  | 切换面板的回调                                     | `EventEmitter<{ from: number; to: number }>` | -           |
 

components/carousel/style/index.less

@@ -117,61 +117,6 @@
     height: auto;
   }
 
-  .slick-arrow.slick-hidden {
-    display: none;
-  }
-
-  // Arrows
-  .slick-prev,
-  .slick-next {
-    position: absolute;
-    top: 50%;
-    display: block;
-    width: 20px;
-    height: 20px;
-    margin-top: -10px;
-    padding: 0;
-    color: transparent;
-    font-size: 0;
-    line-height: 0;
-    background: transparent;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      color: transparent;
-      background: transparent;
-      outline: none;
-
-      &::before {
-        opacity: 1;
-      }
-    }
-
-    &.slick-disabled::before {
-      opacity: 0.25;
-    }
-  }
-
-  .slick-prev {
-    left: -25px;
-
-    &::before {
-      content: '←';
-    }
-  }
-
-  .slick-next {
-    right: -25px;
-
-    &::before {
-      content: '→';
-    }
-  }
-
-  // Dots
   .slick-dots {
     position: absolute;
     right: 0;

components/carousel/style/patch.less

@@ -13,3 +13,95 @@ nz-carousel {
 .slick-track {
   opacity: 1;
 }
+
+.slick-list {
+  direction: ltr;
+}
+
+.@{carousel-prefix-cls} {
+  .slick-prev {
+    inset-inline-start: 8px;
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  .slick-next {
+    inset-inline-end: 8px;
+
+    &::after {
+      transform: rotate(135deg);
+    }
+  }
+
+  .slick-prev,
+  .slick-next {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    color: #fff;
+    line-height: 0;
+    background: transparent;
+    border: 0;
+    outline: none;
+    transform: translateY(-50%);
+    cursor: pointer;
+    opacity: 0.4;
+    transition: opacity 0.3s;
+
+    &.slick-disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &::after {
+      position: absolute;
+      top: calc((16px - calc(16px / 1.41421356)) / 2);
+      display: inline-block;
+      box-sizing: border-box;
+      width: calc(16px / 1.41421356);
+      height: calc(16px / 1.41421356);
+      border: 0 solid currentcolor;
+      border-radius: 1px;
+      content: '';
+      inset-inline-start: calc((16px - calc(16px / 1.41421356)) / 2);
+      border-inline-width: 2px 0;
+      border-block-width: 2px 0;
+    }
+  }
+
+  .slick-vertical {
+    .slick-prev {
+      inset-block-start: 8px;
+      inset-inline-start: 50%;
+
+      &::after {
+        transform: rotate(45deg);
+      }
+    }
+
+    .slick-next {
+      inset-block-start: auto;
+      inset-block-end: 8px;
+
+      &::after {
+        transform: rotate(-135deg);
+      }
+    }
+
+    .slick-prev,
+    .slick-next {
+      inset-inline-start: 50%;
+      margin-block-start: unset;
+      transform: translateX(-50%);
+    }
+  }
+}

components/core/config/config.ts

@@ -156,6 +156,7 @@ export interface CardConfig {
 export interface CarouselConfig {
   nzAutoPlay?: boolean;
   nzAutoPlaySpeed?: boolean;
+  nzArrows?: boolean;
   nzDots?: boolean;
   nzEffect?: 'scrollx' | 'fade' | string;
   nzEnableSwipe?: boolean;