+ @for (idx of renderedIndices(); track $index) {
+
+
+
+ }
+
diff --git a/tedi/components/content/carousel/carousel-content/carousel-content.component.scss b/tedi/components/content/carousel/carousel-content/carousel-content.component.scss
new file mode 100644
index 000000000..5ecffae1e
--- /dev/null
+++ b/tedi/components/content/carousel/carousel-content/carousel-content.component.scss
@@ -0,0 +1,37 @@
+.tedi-carousel__content {
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ touch-action: pan-y;
+ cursor: grab;
+
+ &:focus-visible {
+ outline: var(--borders-02) solid var(--primary-500);
+ outline-offset: calc(-1 * var(--borders-03));
+ }
+
+ &:active {
+ cursor: grabbing;
+ }
+
+ &--fade-right {
+ mask-image: linear-gradient(to right, black 90%, transparent 100%);
+ }
+
+ &--fade-x {
+ mask-image:
+ linear-gradient(to right, black 85%, transparent 100%),
+ linear-gradient(to left, black 85%, transparent 100%);
+ mask-composite: intersect;
+ }
+}
+
+.tedi-carousel__track {
+ display: flex;
+ will-change: transform;
+}
+
+.tedi-carousel__slide {
+ user-select: none;
+ -webkit-user-drag: none;
+}
diff --git a/tedi/components/content/carousel/carousel-content/carousel-content.component.ts b/tedi/components/content/carousel/carousel-content/carousel-content.component.ts
new file mode 100644
index 000000000..36c11c0e4
--- /dev/null
+++ b/tedi/components/content/carousel/carousel-content/carousel-content.component.ts
@@ -0,0 +1,436 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ ElementRef,
+ ViewEncapsulation,
+ computed,
+ contentChildren,
+ signal,
+ viewChild,
+ AfterViewInit,
+ OnDestroy,
+ input,
+ inject,
+ HostListener,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { CarouselSlideDirective } from "../carousel-slide.directive";
+import {
+ breakpointInput,
+ BreakpointInput,
+ BreakpointService,
+} from "../../../../services/breakpoint/breakpoint.service";
+import { TediTranslationService } from "../../../../services";
+
+@Component({
+ standalone: true,
+ selector: "tedi-carousel-content",
+ templateUrl: "./carousel-content.component.html",
+ styleUrls: ["./carousel-content.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ imports: [NgTemplateOutlet],
+ host: {
+ tabindex: "0",
+ role: "region",
+ "aria-roledescription": "carousel",
+ "[attr.aria-label]": "translationService.track('carousel')()",
+ "aria-live": "off",
+ "[class]": "classes()",
+ },
+})
+export class CarouselContentComponent implements AfterViewInit, OnDestroy {
+ /** Slides per view (minimum 1, can be fractional, e.g. 1.25 for peeking) */
+ readonly slidesPerView = input(
+ { xs: 1 },
+ { transform: (v: BreakpointInput