Skip to content

feat(carousel): add carousel component#2129

Merged
spike-rabbit merged 1 commit into
mainfrom
feat/carousel
Jun 18, 2026
Merged

feat(carousel): add carousel component#2129
spike-rabbit merged 1 commit into
mainfrom
feat/carousel

Conversation

@chintankavathia

@chintankavathia chintankavathia commented Jun 5, 2026

Copy link
Copy Markdown
Member

Adds a new carousel component si-carousel and siCarouselItem directive for displaying slides with navigation controls and auto-play functionality.

Usage

<si-carousel [autoPlay]="5000">
  <div siCarouselItem>Slide 1</div>
  <div siCarouselItem>Slide 2</div>
  <div siCarouselItem>Slide 3</div>
</si-carousel>

figma specs: https://www.figma.com/design/NwIMx3RiEkPPidbu12eDF9/%F0%9F%94%B5-Carrousel?node-id=3419-1198&p=f&m=dev


Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new SiCarouselComponent and updates the CriterionDefinition interface in the filtered-search module. The review feedback identifies a style guide violation regarding the use of effect() for state propagation, suggests removing non-idiomatic 'this.' references in Angular templates, and highlights several UX writing guideline violations in the carousel example component, specifically regarding capitalization, vocabulary, and the use of abbreviations.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread projects/element-ng/carousel/si-carousel.component.ts Outdated
Comment thread projects/element-ng/carousel/si-carousel.component.html Outdated
Comment thread src/app/examples/si-carousel/si-carousel.html Outdated
Comment thread src/app/examples/si-carousel/si-carousel.html Outdated
Comment thread src/app/examples/si-carousel/si-carousel.html Outdated
Comment thread src/app/examples/si-carousel/si-carousel.html Outdated
@chintankavathia chintankavathia force-pushed the feat/carousel branch 13 times, most recently from 9992588 to e3201bf Compare June 10, 2026 08:17
Comment thread src/app/examples/si-carousel/si-carousel.ts Fixed
@chintankavathia chintankavathia force-pushed the feat/carousel branch 10 times, most recently from 7505a03 to b14a1a6 Compare June 10, 2026 14:02
@chintankavathia chintankavathia marked this pull request as ready for review June 10, 2026 14:21
@chintankavathia chintankavathia requested review from a team as code owners June 10, 2026 14:21
Comment thread projects/element-ng/carousel/si-carousel.component.scss
@chintankavathia chintankavathia force-pushed the feat/carousel branch 3 times, most recently from 70aa4d3 to c6c6472 Compare June 16, 2026 06:42
@chintankavathia

Copy link
Copy Markdown
Member Author

I think the handling of multiple fast presses of the next/prev buttons is not ideal. I guess the moving should just accelerate and not replay until all clicks are processed. When operating with keyboard and the focus is on the entire carousel, subsequent arrow key presses are just dropped. The should not be.

Comment thread src/app/examples/si-carousel/si-carousel.ts Fixed
Comment thread projects/element-ng/carousel/si-carousel.component.spec.ts Outdated
@chintankavathia chintankavathia force-pushed the feat/carousel branch 3 times, most recently from 8a6ae3f to 8fcde90 Compare June 17, 2026 13:27
Comment thread projects/element-ng/carousel/si-carousel.component.html Outdated
Comment thread projects/element-ng/carousel/si-carousel.component.ts Outdated
@chintankavathia chintankavathia force-pushed the feat/carousel branch 7 times, most recently from 90db7a2 to 0ba3787 Compare June 18, 2026 06:18
Adds a new carousel component `si-carousel` and  `siCarouselItem` directive for displaying slides with navigation controls and auto-play functionality.

```ts
<si-carousel [autoPlay]="5000">
  <div siCarouselItem>Slide 1</div>
  <div siCarouselItem>Slide 2</div>
  <div siCarouselItem>Slide 3</div>
</si-carousel>
```

figma specs: https://www.figma.com/design/NwIMx3RiEkPPidbu12eDF9/%F0%9F%94%B5-Carrousel?node-id=3419-1198&p=f&m=dev

@spike-rabbit spike-rabbit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@spike-rabbit spike-rabbit added this pull request to the merge queue Jun 18, 2026
Merged via the queue into main with commit 0a3f82f Jun 18, 2026
18 checks passed
@spike-rabbit spike-rabbit deleted the feat/carousel branch June 18, 2026 12:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants