From f83f4b6633f61b96d725db100eac2660e5f77f8b Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Wed, 16 Jul 2025 10:46:19 +0300 Subject: [PATCH 1/2] feat(carousel): select slide by index --- CHANGELOG.md | 8 +++++++ .../lib/carousel/carousel.component.spec.ts | 16 ++++++++++++-- .../src/lib/carousel/carousel.component.ts | 21 ++++++++++++++++--- 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6fe5277e2a5..de53dc4b921 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,14 @@ All notable changes for each version of this project will be documented in this file. +## 20.1.0 +### New Features +- `IgxCarousel` + - Added `select` method overload accepting index. + ```ts + this.carousel.select(2, Direction.NEXT); + ``` + ## 20.0.2 ### New Features diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index b99e6ec5007..62ebc2e1ba1 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -143,15 +143,27 @@ describe('Carousel', () => { carousel.next(); let currentSlide = carousel.get(carousel.current); - fixture.detectChanges(); expect(carousel.get(1)).toBe(currentSlide); currentSlide = carousel.get(0); carousel.prev(); - fixture.detectChanges(); expect(carousel.get(0)).toBe(currentSlide); + + carousel.select(1); + fixture.detectChanges(); + expect(carousel.get(1)).toBe(carousel.get(carousel.current)); + + // select a negative index -> active slide remains the same + carousel.select(-1); + fixture.detectChanges(); + expect(carousel.get(1)).toBe(carousel.get(carousel.current)); + + // select a non-existent index -> active slide remains the same + carousel.select(carousel.slides.length); + fixture.detectChanges(); + expect(carousel.get(1)).toBe(carousel.get(carousel.current)); }); it('emit events', () => { diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 8f740c49d02..d2932e3ecaf 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -816,14 +816,29 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On } /** - * Kicks in a transition for a given slide with a given `direction`. + * Switches to the passed-in slide with a given `direction`. * ```typescript - * this.carousel.select(this.carousel.get(2), Direction.NEXT); + * const slide = this.carousel.get(2); + * this.carousel.select(slide, Direction.NEXT); * ``` * * @memberOf IgxCarouselComponent */ - public select(slide: IgxSlideComponent, direction: Direction = Direction.NONE) { + public select(slide: IgxSlideComponent, direction?: Direction): void; + /** + * Switches to slide by index with a given `direction`. + * ```typescript + * this.carousel.select(2, Direction.NEXT); + * ``` + * + * @memberOf IgxCarouselComponent + */ + public select(index: number, direction?: Direction): void; + public select(slideOrIndex: IgxSlideComponent | number, direction: Direction = Direction.NONE): void { + const slide = typeof slideOrIndex === 'number' + ? this.get(slideOrIndex) + : slideOrIndex; + if (slide && slide !== this.currentItem) { slide.direction = direction; slide.active = true; From a4a88cebecbfe21242c8e6accd467e29e65913b7 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Wed, 16 Jul 2025 11:07:32 +0300 Subject: [PATCH 2/2] docs(carousel): add select index overload to readme --- projects/igniteui-angular/src/lib/carousel/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/carousel/README.md b/projects/igniteui-angular/src/lib/carousel/README.md index 78c2938ec58..9f912772346 100644 --- a/projects/igniteui-angular/src/lib/carousel/README.md +++ b/projects/igniteui-angular/src/lib/carousel/README.md @@ -34,8 +34,9 @@ A walkthrough of how to get started can be found [here](https://www.infragistics | `next()` | void | Switches to the next slide. Emits `slideChanged` event. | | `add(slide: IgxSlide)` | void | Adds a slide to the carousel. Emits `slideAdded` event. | | `remove(slide: IgxSlide)` | void | Removes an existing slide from the carousel. Emits `slideRemoved` event. | -| `get(index: Number)` | IgxSlide or void | Returns the slide with the given index or null. | -| `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `slideChanged` event. | +| `get(index: number)` | IgxSlide or void | Returns the slide with the given index or null. | +| `select(slide: IgxSlide, direction: Direction)`| void | Switches to the passed-in slide with a given direction. Emits `slideChanged` event. | +| `select(index: number, direction: Direction)`| void | Switches to slide by index with a given direction. Emits `slideChanged` event. | ### Keyboard navigation