From 000d900f6b30d6db27e3e1a35724cb6f35c17738 Mon Sep 17 00:00:00 2001
From: Quentin Deroubaix <quentin.deroubaix@amadeus.com>
Date: Mon, 5 Aug 2024 09:03:46 +0200
Subject: [PATCH] feat: headless carousel

---
 .../samples/carousel/carousel.component.html  |  45 ++
 .../samples/carousel/carousel.component.ts    |  54 ++
 .../src/app/samples/carousel/default.route.ts |  67 +++
 .../app/samples/carousel/demoGallery.route.ts |  18 +
 .../carousel/gallery-image.component.ts       |  42 ++
 .../samples/carousel/gallery.component.html   |  64 +++
 .../app/samples/carousel/gallery.component.ts |  94 ++++
 common/samples/carousel/compress.svg          |   1 +
 common/samples/carousel/expand.svg            |   1 +
 common/samples/carousel/photo.ts              |  46 ++
 core/package.json                             |   1 +
 core/src/components/carousel/carousel.ts      | 250 +++++++++
 core/src/components/carousel/index.ts         |   1 +
 core/src/config.ts                            |   5 +
 demo/src/lib/components-metadata.ts           |  28 +-
 demo/src/lib/layout/StatusAlert.svelte        |   2 +-
 demo/src/lib/server/index.ts                  |   4 +-
 .../angular-daisyui/package-lock.json         |  19 +
 .../stackblitz/angular-daisyui/package.json   |   1 +
 .../react-daisyui/package-lock.json           |  19 +
 .../lib/stackblitz/react-daisyui/package.json |   1 +
 .../svelte-daisyui/package-lock.json          |  19 +
 .../stackblitz/svelte-daisyui/package.json    |   1 +
 .../docs/[framework]/components/getMenu.ts    |   2 +-
 .../daisyUI/carousel/+layout.server.ts        |   3 +
 .../daisyUI/carousel/headless/+page.svelte    |  22 +
 .../docs/[framework]/daisyUI/getMenu.ts       |   2 +-
 .../daisyui-carousel-default.html             | 214 ++++++++
 .../daisyui-carousel-demogallery.html         | 501 ++++++++++++++++++
 package-lock.json                             |  19 +
 .../src/daisyui/samples/carousel/Carousel.tsx |  80 +++
 .../samples/carousel/Default.route.tsx        |  74 +++
 .../samples/carousel/DemoGallery.route.tsx    |  11 +
 .../src/daisyui/samples/carousel/Gallery.tsx  | 165 ++++++
 svelte/demo/package.json                      |   1 +
 .../daisyui/samples/carousel/Carousel.svelte  |  78 +++
 .../samples/carousel/Default.route.svelte     |  49 ++
 .../samples/carousel/DemoGallery.route.svelte |  10 +
 .../daisyui/samples/carousel/Gallery.svelte   | 120 +++++
 .../samples/carousel/GalleryImage.svelte      |  36 ++
 40 files changed, 2146 insertions(+), 24 deletions(-)
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/carousel.component.html
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/carousel.component.ts
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/default.route.ts
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/demoGallery.route.ts
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/gallery-image.component.ts
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/gallery.component.html
 create mode 100644 angular/demo/daisyui/src/app/samples/carousel/gallery.component.ts
 create mode 100644 common/samples/carousel/compress.svg
 create mode 100644 common/samples/carousel/expand.svg
 create mode 100644 common/samples/carousel/photo.ts
 create mode 100644 core/src/components/carousel/carousel.ts
 create mode 100644 core/src/components/carousel/index.ts
 create mode 100644 demo/src/routes/docs/[framework]/daisyUI/carousel/+layout.server.ts
 create mode 100644 demo/src/routes/docs/[framework]/daisyUI/carousel/headless/+page.svelte
 create mode 100644 e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-default.html
 create mode 100644 e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-demogallery.html
 create mode 100644 react/demo/src/daisyui/samples/carousel/Carousel.tsx
 create mode 100644 react/demo/src/daisyui/samples/carousel/Default.route.tsx
 create mode 100644 react/demo/src/daisyui/samples/carousel/DemoGallery.route.tsx
 create mode 100644 react/demo/src/daisyui/samples/carousel/Gallery.tsx
 create mode 100644 svelte/demo/src/daisyui/samples/carousel/Carousel.svelte
 create mode 100644 svelte/demo/src/daisyui/samples/carousel/Default.route.svelte
 create mode 100644 svelte/demo/src/daisyui/samples/carousel/DemoGallery.route.svelte
 create mode 100644 svelte/demo/src/daisyui/samples/carousel/Gallery.svelte
 create mode 100644 svelte/demo/src/daisyui/samples/carousel/GalleryImage.svelte

diff --git a/angular/demo/daisyui/src/app/samples/carousel/carousel.component.html b/angular/demo/daisyui/src/app/samples/carousel/carousel.component.html
new file mode 100644
index 0000000000..afeb769222
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/carousel.component.html
@@ -0,0 +1,45 @@
+<div class="overflow-hidden relative cursor-grab active:cursor-grabbing" [auUse]="widget.directives.emblaDirective">
+	<div class="flex">
+		@for (item of items(); track item) {
+			<div class="basis-full min-w-0 shrink-0 grow-0 flex justify-center">
+				<ng-container *ngTemplateOutlet="slideRef().templateRef; context: {$implicit: item}"></ng-container>
+			</div>
+		}
+	</div>
+	@if (withNavArrows()) {
+		<div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+			<button
+				class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+				(pointerdown)="$event.preventDefault()"
+				[disabled]="!state().canScrollPrev"
+				(click)="widget.api.scrollPrev()"
+				aria-label="Go to previous slide"
+			>
+				❮
+			</button>
+			<button
+				class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+				(pointerdown)="$event.preventDefault()"
+				[disabled]="!state().canScrollNext"
+				(click)="widget.api.scrollNext()"
+				aria-label="Go to next slide"
+			>
+				❯
+			</button>
+		</div>
+	}
+	@if (withNavIndicators()) {
+		<div class="flex w-full justify-center gap-2 py-2 cursor-auto">
+			@for (item of items(); track item; let index = $index) {
+				<button
+					class="btn btn-xs md:btn-sm"
+					[class.btn-active]="state().selectedScrollSnap === index"
+					(click)="widget.api.scrollTo(index)"
+					attr.aria-label="Go to slide {{ index + 1 }}"
+				>
+					{{ index + 1 }}
+				</button>
+			}
+		</div>
+	}
+</div>
diff --git a/angular/demo/daisyui/src/app/samples/carousel/carousel.component.ts b/angular/demo/daisyui/src/app/samples/carousel/carousel.component.ts
new file mode 100644
index 0000000000..620f4c96c5
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/carousel.component.ts
@@ -0,0 +1,54 @@
+import {
+	auBooleanAttribute,
+	BaseWidgetDirective,
+	callWidgetFactory,
+	createCarousel,
+	UseDirective,
+	type CarouselWidget,
+} from '@agnos-ui/angular-headless';
+import {NgTemplateOutlet} from '@angular/common';
+import {Component, contentChild, Directive, effect, inject, input, TemplateRef} from '@angular/core';
+import AutoPlay from 'embla-carousel-autoplay';
+
+export interface CarouselSlideContext {
+	$implicit: string;
+}
+
+@Directive({standalone: true, selector: 'ng-template[appCarouselSlide]'})
+export class CarouselSlideDirective {
+	public templateRef = inject(TemplateRef<CarouselSlideContext>);
+	static ngTemplateContextGuard(_dir: CarouselSlideDirective, context: unknown): context is CarouselSlideContext {
+		return true;
+	}
+}
+
+@Component({
+	selector: 'app-carousel',
+	standalone: true,
+	templateUrl: 'carousel.component.html',
+	imports: [UseDirective, NgTemplateOutlet],
+})
+export class CarouselComponent<Item> extends BaseWidgetDirective<CarouselWidget> {
+	readonly dragFree = input(false, {transform: auBooleanAttribute});
+	readonly loop = input(true, {transform: auBooleanAttribute});
+	readonly autoplay = input(true, {transform: auBooleanAttribute});
+	readonly withNavIndicators = input(true, {transform: auBooleanAttribute});
+	readonly withNavArrows = input(true, {transform: auBooleanAttribute});
+	readonly items = input.required<Item[]>();
+
+	readonly slideRef = contentChild.required(CarouselSlideDirective);
+
+	readonly _widget = callWidgetFactory({
+		factory: createCarousel,
+		widgetName: 'carousel',
+	});
+
+	constructor() {
+		super();
+		effect(() => {
+			this._widget.patch({
+				plugins: this.autoplay() ? [AutoPlay({playOnInit: true, stopOnInteraction: false, stopOnMouseEnter: true, stopOnFocusIn: true})] : [],
+			});
+		});
+	}
+}
diff --git a/angular/demo/daisyui/src/app/samples/carousel/default.route.ts b/angular/demo/daisyui/src/app/samples/carousel/default.route.ts
new file mode 100644
index 0000000000..bb01a5e56d
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/default.route.ts
@@ -0,0 +1,67 @@
+import {Component} from '@angular/core';
+import {CarouselComponent, CarouselSlideDirective} from './carousel.component';
+import {FormsModule} from '@angular/forms';
+
+@Component({
+	standalone: true,
+	template: `
+		<div class="w-full flex justify-center">
+			<div class="max-w-[600px] self-center">
+				<app-carousel
+					[items]="photos"
+					[withNavArrows]="withNavArrows"
+					[withNavIndicators]="withNavIndicators"
+					[loop]="loop"
+					[dragFree]="dragFree"
+					[autoplay]="autoplay && loop"
+				>
+					<img
+						*appCarouselSlide="let photo"
+						[src]="photo"
+						class="select-none object-contain aspect-[4/3] w-full"
+						alt="random picsum"
+						loading="lazy"
+					/>
+				</app-carousel>
+				<div class="form-control items-start">
+					<label class="label cursor-pointer gap-3">
+						<span class="label-text">Loop</span>
+						<input type="checkbox" class="toggle toggle-primary" [(ngModel)]="loop" />
+					</label>
+					<label class="label gap-3" [class.cursor-pointer]="loop">
+						<span class="label-text">Autoplay</span>
+						<input type="checkbox" class="toggle toggle-primary" [(ngModel)]="autoplay" [disabled]="!loop" />
+					</label>
+					<label class="label cursor-pointer gap-3">
+						<span class="label-text">Drag free</span>
+						<input type="checkbox" class="toggle toggle-primary" [(ngModel)]="dragFree" />
+					</label>
+					<label class="label cursor-pointer gap-3">
+						<span class="label-text">Navigation Indicators</span>
+						<input type="checkbox" class="toggle toggle-primary" [(ngModel)]="withNavIndicators" />
+					</label>
+					<label class="label cursor-pointer gap-3">
+						<span class="label-text">Navigation Arrows</span>
+						<input type="checkbox" class="toggle toggle-primary" [(ngModel)]="withNavArrows" />
+					</label>
+				</div>
+			</div>
+		</div>
+	`,
+	imports: [CarouselComponent, CarouselSlideDirective, FormsModule],
+})
+export default class DemoCarouselComponent {
+	readonly photos = [
+		'https://picsum.photos/600/450.webp?random=1',
+		'https://picsum.photos/600/450.webp?random=2',
+		'https://picsum.photos/450/600.webp?random=3',
+		'https://picsum.photos/600/450.webp?random=4',
+		'https://picsum.photos/600/450.webp?random=5',
+		'https://picsum.photos/600/450.webp?random=6',
+	];
+	loop = true;
+	dragFree = false;
+	withNavArrows = true;
+	withNavIndicators = true;
+	autoplay = true;
+}
diff --git a/angular/demo/daisyui/src/app/samples/carousel/demoGallery.route.ts b/angular/demo/daisyui/src/app/samples/carousel/demoGallery.route.ts
new file mode 100644
index 0000000000..39cb64d076
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/demoGallery.route.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {GalleryComponent} from './gallery.component';
+import {photos} from '@agnos-ui/common/samples/carousel/photo';
+
+@Component({
+	standalone: true,
+	template: `
+		<div class="w-full flex justify-center">
+			<div class="max-w-[600px] lg:max-w-[1000px]">
+				<app-gallery [photos]="photos" withNavArrows withShowFullscreen />
+			</div>
+		</div>
+	`,
+	imports: [GalleryComponent],
+})
+export default class DemoGalleryComponent {
+	readonly photos = photos;
+}
diff --git a/angular/demo/daisyui/src/app/samples/carousel/gallery-image.component.ts b/angular/demo/daisyui/src/app/samples/carousel/gallery-image.component.ts
new file mode 100644
index 0000000000..e761288064
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/gallery-image.component.ts
@@ -0,0 +1,42 @@
+import type {Source} from '@agnos-ui/common/samples/carousel/photo';
+import {Component, input, signal} from '@angular/core';
+
+@Component({
+	selector: 'app-gallery-image',
+	standalone: true,
+	template: `
+		@if (loadRequested()) {
+			@if (!imageLoaded()) {
+				<span class="absolute top-1/2 -translate-y-1/2 left-1/2 loading loading-spinner loading-lg text-primary"></span>
+			}
+			<picture class="flex justify-center">
+				@for (source of sources(); track source) {
+					<source [media]="source.media" [srcset]="source.srcset" />
+				}
+				<img
+					class="select-none object-contain transition-opacity ease-in-out duration-300 opacity-0"
+					[class.opacity-100]="toShow()"
+					[alt]="alt()"
+					[src]="src()"
+					loading="lazy"
+					[style.aspect-ratio]="aspectRatio()"
+					(load)="imageLoaded.set(true)"
+				/>
+			</picture>
+		} @else {
+			<div class="skeleton w-full h-full"></div>
+		}
+	`,
+	host: {
+		style: 'display: contents;',
+	},
+})
+export class GalleryImageComponent {
+	readonly src = input.required<string>();
+	readonly alt = input.required<string>();
+	readonly sources = input.required<Source[]>();
+	readonly loadRequested = input.required<boolean>();
+	readonly aspectRatio = input.required<number>();
+	readonly toShow = input.required<boolean>();
+	readonly imageLoaded = signal(false);
+}
diff --git a/angular/demo/daisyui/src/app/samples/carousel/gallery.component.html b/angular/demo/daisyui/src/app/samples/carousel/gallery.component.html
new file mode 100644
index 0000000000..fe80a23587
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/gallery.component.html
@@ -0,0 +1,64 @@
+<div #mainContainer class="grid grid-flow-row max-h-dvh">
+	<div class="overflow-hidden relative cursor-grab active:cursor-grabbing" [auUse]="mainCarouselWidget.directives.emblaDirective">
+		<div class="flex max-h-full">
+			@for (photoWithLoadState of photosWithLoadState(); track photoWithLoadState; let index = $index) {
+				<div class="relative basis-full min-w-0 shrink-0 grow-0 flex justify-center">
+					<app-gallery-image
+						[src]="photoWithLoadState.src"
+						[alt]="photoWithLoadState.alt"
+						[aspectRatio]="aspectRatio()"
+						[loadRequested]="photoWithLoadState.loadRequested()"
+						[sources]="photoWithLoadState.sources"
+						[toShow]="showImage(index)"
+					/>
+				</div>
+			}
+		</div>
+		@if (withNavArrows()) {
+			<div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+				<button
+					class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+					(pointerdown)="$event.preventDefault()"
+					[disabled]="!mainCarouselState().canScrollPrev"
+					(click)="mainCarouselWidget.api.scrollPrev()"
+					aria-label="Go to previous photo"
+				>
+					❮
+				</button>
+				<button
+					class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+					(pointerdown)="$event.preventDefault()"
+					[disabled]="!mainCarouselState().canScrollNext"
+					(click)="mainCarouselWidget.api.scrollNext()"
+					aria-label="Go to next photo"
+				>
+					❯
+				</button>
+			</div>
+		}
+		@if (canFullScreen()) {
+			<div class="absolute right-5 bottom-5 flex">
+				<button
+					class="btn btn-sm md:btn-md opacity-75 hover:opacity-100"
+					(click)="toggleFullScreen()"
+					[attr.aria-label]="isFullScreen() ? 'leave fullscreen' : 'open photo in fullscreen'"
+					[innerHTML]="isFullScreen() ? compressSvg : expandSvg"
+				></button>
+			</div>
+		}
+	</div>
+	<div class="overflow-hidden relative mt-1 mb-2" [auUse]="thumbCarouselWidget.directives.emblaDirective">
+		<div class="grid grid-flow-col auto-cols-max gap-2 mx-1 my-1">
+			@for (photo of photos(); track photo; let index = $index) {
+				<button
+					class="shadow-primary"
+					(click)="scrollToSlide(index)"
+					[class.ring]="mainCarouselState().selectedScrollSnap === index"
+					attr.aria-label="Go to photo {{ index + 1 }}"
+				>
+					<img class="select-none" alt="random picsum" [src]="photo.thumbnail" loading="lazy" [style.aspect-ratio]="aspectRatio()" />
+				</button>
+			}
+		</div>
+	</div>
+</div>
diff --git a/angular/demo/daisyui/src/app/samples/carousel/gallery.component.ts b/angular/demo/daisyui/src/app/samples/carousel/gallery.component.ts
new file mode 100644
index 0000000000..ad13223a2d
--- /dev/null
+++ b/angular/demo/daisyui/src/app/samples/carousel/gallery.component.ts
@@ -0,0 +1,94 @@
+import {Component, computed, type ElementRef, inject, input, type OnDestroy, type OnInit, signal, viewChild} from '@angular/core';
+import type {Photo} from '@agnos-ui/common/samples/carousel/photo';
+import {auBooleanAttribute, callWidgetFactory, createCarousel, UseDirective} from '@agnos-ui/angular-headless';
+import {GalleryImageComponent} from './gallery-image.component';
+import type {UnsubscribeFunction, UnsubscribeObject} from '@amadeus-it-group/tansu';
+import expandSvg from '@agnos-ui/common/samples/carousel/expand.svg';
+import compressSvg from '@agnos-ui/common/samples/carousel/compress.svg';
+import {DomSanitizer} from '@angular/platform-browser';
+
+@Component({
+	selector: 'app-gallery',
+	standalone: true,
+	templateUrl: 'gallery.component.html',
+	imports: [UseDirective, GalleryImageComponent],
+})
+export class GalleryComponent implements OnInit, OnDestroy {
+	readonly photos = input.required<Photo[]>();
+	readonly withNavArrows = input(false, {transform: auBooleanAttribute});
+	readonly withShowFullscreen = input(false, {transform: auBooleanAttribute});
+	readonly aspectRatio = input(4 / 3);
+
+	private readonly domSanitizer = inject(DomSanitizer);
+	readonly expandSvg = this.domSanitizer.bypassSecurityTrustHtml(expandSvg);
+	readonly compressSvg = this.domSanitizer.bypassSecurityTrustHtml(compressSvg);
+
+	private readonly _mainCarousel = callWidgetFactory({
+		factory: createCarousel,
+		widgetName: 'carousel',
+	});
+	get mainCarouselWidget() {
+		return this._mainCarousel.widget;
+	}
+	get mainCarouselState() {
+		return this._mainCarousel.ngState;
+	}
+
+	private readonly _thumbCarousel = callWidgetFactory({
+		factory: createCarousel,
+		widgetName: 'carousel',
+		defaultConfig: {
+			dragFree: true,
+			containScroll: 'keepSnaps',
+		},
+	});
+	get thumbCarouselWidget() {
+		return this._thumbCarousel.widget;
+	}
+	get thumbCarouselState() {
+		return this._thumbCarousel.ngState;
+	}
+
+	readonly photosWithLoadState = computed(() => this.photos().map((photo, index) => ({...photo, loadRequested: signal(index === 0)})));
+	readonly canFullScreen = computed(() => this.withShowFullscreen() && document?.fullscreenEnabled);
+	readonly isFullScreen = signal(false);
+	readonly mainContainer = viewChild.required<ElementRef>('mainContainer');
+	private selectedScrollSnapSubscription?: UnsubscribeFunction & UnsubscribeObject;
+
+	ngOnInit() {
+		this._mainCarousel.ngInit();
+		this._thumbCarousel.ngInit();
+		this.selectedScrollSnapSubscription = this._mainCarousel.stores.selectedScrollSnap$.subscribe((selectedSnap: number) => {
+			this.thumbCarouselWidget.api.scrollTo(selectedSnap);
+			const photosWithLoadState = this.photosWithLoadState();
+			photosWithLoadState[selectedSnap].loadRequested.set(true);
+			if (selectedSnap > 0) {
+				photosWithLoadState[selectedSnap - 1].loadRequested.set(true);
+			}
+			if (selectedSnap < photosWithLoadState.length - 1) {
+				photosWithLoadState[selectedSnap + 1].loadRequested.set(true);
+			}
+		});
+	}
+
+	ngOnDestroy() {
+		this.selectedScrollSnapSubscription?.();
+	}
+
+	toggleFullScreen() {
+		if (!this.isFullScreen()) {
+			this.mainContainer().nativeElement.requestFullscreen();
+		} else {
+			void document.exitFullscreen();
+		}
+		this.isFullScreen.update((val) => !val);
+	}
+
+	scrollToSlide(index: number) {
+		this.mainCarouselWidget.api.scrollTo(index, Math.abs(this.mainCarouselState().selectedScrollSnap - index) > 2);
+	}
+
+	showImage(index: number) {
+		return Math.abs(this.mainCarouselState().selectedScrollSnap - index) <= 2;
+	}
+}
diff --git a/common/samples/carousel/compress.svg b/common/samples/carousel/compress.svg
new file mode 100644
index 0000000000..0dc2af2089
--- /dev/null
+++ b/common/samples/carousel/compress.svg
@@ -0,0 +1 @@
+<svg style="width: 1em; height: 1em; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 320c-17.7 0-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0z"/></svg>
\ No newline at end of file
diff --git a/common/samples/carousel/expand.svg b/common/samples/carousel/expand.svg
new file mode 100644
index 0000000000..24d7f33a4d
--- /dev/null
+++ b/common/samples/carousel/expand.svg
@@ -0,0 +1 @@
+<svg style="width: 1em; height: 1em; vertical-align: -0.125em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z"/></svg>
diff --git a/common/samples/carousel/photo.ts b/common/samples/carousel/photo.ts
new file mode 100644
index 0000000000..f06665ee0a
--- /dev/null
+++ b/common/samples/carousel/photo.ts
@@ -0,0 +1,46 @@
+export type Source = {
+	media: string;
+	srcset: string;
+};
+
+export type Photo = {
+	thumbnail: string;
+	src: string;
+	alt: string;
+	sources: Source[];
+};
+
+const ids = [36, 43, 70, 102, 124, 142, 156, 242, 288, 289, 295, 361, 400, 488, 496, 515, 557, 607, 623, 645];
+const verticalIds = [124, 289, 400, 488, 607];
+
+const _photos: Photo[] = [];
+const formatUrl = (id: number, longAxis: number, smallAxis: number, isVertical: boolean) =>
+	`https://picsum.photos/id/${id}/${isVertical ? smallAxis : longAxis}/${isVertical ? longAxis : smallAxis}.webp`;
+
+for (const id of ids) {
+	const isVertical = verticalIds.includes(id);
+	_photos.push({
+		thumbnail: formatUrl(id, 120, 90, isVertical),
+		src: formatUrl(id, 1600, 1200, isVertical),
+		alt: `random picsum`,
+		sources: [
+			{
+				media: '(max-width: 599px)',
+				srcset: formatUrl(id, 600, 450, isVertical),
+			},
+			{
+				media: '(min-width: 600px) and (max-width: 799px)',
+				srcset: formatUrl(id, 800, 600, isVertical),
+			},
+			{
+				media: '(min-width: 800px) and (max-width: 1199px)',
+				srcset: formatUrl(id, 1200, 900, isVertical),
+			},
+			{
+				media: '(min-width: 1200px)',
+				srcset: formatUrl(id, 1600, 1200, isVertical),
+			},
+		],
+	});
+}
+export const photos = [..._photos];
diff --git a/core/package.json b/core/package.json
index 08ed2a6412..4ba9b882fe 100644
--- a/core/package.json
+++ b/core/package.json
@@ -133,6 +133,7 @@
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^1.0.0",
 		"@floating-ui/dom": "^1.6.10",
+		"embla-carousel": "^8.1.7",
 		"esm-env": "^1.0.0"
 	},
 	"sideEffects": false
diff --git a/core/src/components/carousel/carousel.ts b/core/src/components/carousel/carousel.ts
new file mode 100644
index 0000000000..f44a5fd3f3
--- /dev/null
+++ b/core/src/components/carousel/carousel.ts
@@ -0,0 +1,250 @@
+import {stateStores, writablesForProps} from '../../utils/stores';
+import type {ConfigValidator, Directive, PropsConfig, Widget} from '../../types';
+import {bindDirective, browserDirective} from '../../utils/directive';
+import type {EmblaCarouselType, EmblaPluginType, EmblaPluginsType} from 'embla-carousel';
+import EmblaCarousel from 'embla-carousel';
+import {computed, writable} from '@amadeus-it-group/tansu';
+import {typeBoolean} from '../../utils/writables';
+
+interface EmblaOptions {
+	/**
+	 * Align the slides relative to the carousel viewport
+	 * @defaultValue `'center'`
+	 */
+	align: 'start' | 'center' | 'end';
+	/**
+	 * Choose scroll axis between `x` and `y`
+	 * @defaultValue `'x'`
+	 */
+	axis: 'x' | 'y';
+	/**
+	 * Clear leading and trailing empty space that causes excessive scrolling
+	 * @defaultValue `'trimSnaps'`
+	 */
+	containScroll: false | 'trimSnaps' | 'keepSnaps';
+	/**
+	 * Choose content direction between `ltr` and `rtl`
+	 * @defaultValue `'ltr'`
+	 */
+	direction: 'ltr' | 'rtl';
+	/**
+	 * Enables momentum scrolling
+	 * @defaultValue `false`
+	 */
+	dragFree: boolean;
+	/**
+	 * Drag threshold in pixels
+	 * @defaultValue `10`
+	 */
+	dragThreshold: number;
+	/**
+	 * Set scroll duration when triggered by any of the API methods
+	 * @defaultValue `25`
+	 */
+	duration: number;
+	/**
+	 * Intersetion Observer threshold applied to compute slidesInView
+	 * @defaultValue `0`
+	 */
+	inViewThreshold: number;
+	/**
+	 * Enables infinite looping
+	 * @defaultValue `false`
+	 */
+	loop: boolean;
+	/**
+	 * Allow the carousel to skip scroll snaps if it's dragged vigorously
+	 * @defaultValue `false`
+	 */
+	skipSnaps: boolean;
+}
+
+export interface CarouselProps extends EmblaOptions {
+	/**
+	 * Plugins to extend the carousel with additional features
+	 * @defaultValue `[]`
+	 */
+	plugins: EmblaPluginType[];
+}
+
+export interface CarouselState {
+	/**
+	 * is the carousel currently scrolling
+	 */
+	scrolling: boolean;
+	/**
+	 * slides in view
+	 */
+	slidesInView: number[];
+	/**
+	 * can carousel scroll to previous slide
+	 */
+	canScrollPrev: boolean;
+	/**
+	 * can carousel scroll to next slide
+	 */
+	canScrollNext: boolean;
+	/**
+	 * selected scroll snap
+	 */
+	selectedScrollSnap: number;
+}
+
+export interface CarouselApi {
+	/**
+	 * Scroll to the previous snap point if possible.
+	 */
+	scrollPrev: () => void;
+	/**
+	 * Scroll to the next snap point if possible.
+	 */
+	scrollNext: () => void;
+	/**
+	 * Scroll to a snap point by index
+	 * @param index the snap point index
+	 * @param jump scroll instantly
+	 */
+	scrollTo: (index: number, jump?: boolean) => void;
+	/**
+	 * Retrieve the enabled plugins
+	 */
+	plugins: () => EmblaPluginsType | undefined;
+}
+
+export interface CarouselDirectives {
+	/**
+	 * the embla directive
+	 */
+	emblaDirective: Directive;
+}
+
+export type CarouselWidget = Widget<CarouselProps, CarouselState, CarouselApi, object, CarouselDirectives>;
+
+const defaultConfig: CarouselProps = {
+	align: 'center',
+	axis: 'x',
+	containScroll: 'trimSnaps',
+	direction: 'ltr',
+	dragFree: false,
+	dragThreshold: 10,
+	duration: 25,
+	inViewThreshold: 0,
+	loop: false,
+	skipSnaps: false,
+	plugins: [],
+};
+
+/**
+ * Retrieve a shallow copy of the default Carousel config
+ * @returns the default Carousel config
+ */
+export function getCarouselDefaultConfig(): CarouselProps {
+	return {...defaultConfig};
+}
+
+// TODO add more validators. probably need a new issue to add an enum validator ?
+const configValidator: ConfigValidator<CarouselProps> = {
+	dragFree: typeBoolean,
+};
+
+/**
+ * Create an CarouselWidget with given config props
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+export function createCarousel(config?: PropsConfig<CarouselProps>): CarouselWidget {
+	const [
+		{align$, axis$, containScroll$, direction$, dragFree$, dragThreshold$, duration$, inViewThreshold$, loop$, skipSnaps$, plugins$, ...stateProps},
+		patch,
+	] = writablesForProps(defaultConfig, config, configValidator);
+	let emblaApi: EmblaCarouselType | undefined;
+
+	const scrolling$ = writable(false);
+	const slidesInView$ = writable([] as number[]);
+	const canScrollPrev$ = writable(false);
+	const canScrollNext$ = writable(false);
+	const selectedScrollSnap$ = writable(0);
+
+	const emblaOptions$ = computed(() => ({
+		align: align$(),
+		axis: axis$(),
+		containScroll: containScroll$(),
+		direction: direction$(),
+		dragFree: dragFree$(),
+		dragThreshold: dragThreshold$(),
+		duration: duration$(),
+		inViewThreshold: inViewThreshold$(),
+		loop: loop$(),
+		skipSnaps: skipSnaps$(),
+	}));
+
+	return {
+		...stateStores({
+			scrolling$,
+			slidesInView$,
+			canScrollNext$,
+			canScrollPrev$,
+			selectedScrollSnap$,
+			...stateProps,
+		}),
+		patch,
+		api: {
+			scrollPrev: () => {
+				emblaApi?.scrollPrev?.();
+			},
+			scrollNext: () => {
+				emblaApi?.scrollNext?.();
+			},
+			scrollTo: (index: number, jump?: boolean) => {
+				emblaApi?.scrollTo?.(index, jump);
+			},
+			plugins: () => emblaApi?.plugins(),
+		},
+		directives: {
+			emblaDirective: bindDirective(
+				browserDirective((element: HTMLElement, {options, plugins}: {options: EmblaOptions; plugins: EmblaPluginType[]}) => {
+					if (emblaApi) {
+						throw new Error('Only one Embla directive can be attached per carousel widget !');
+					}
+					emblaApi = EmblaCarousel(element, options, plugins);
+					emblaApi.on('scroll', () => {
+						scrolling$.set(true);
+					});
+					emblaApi.on('settle', () => {
+						scrolling$.set(false);
+					});
+					emblaApi.on('slidesInView', (api) => {
+						slidesInView$.set(api.slidesInView());
+					});
+					emblaApi.on('select', (api) => {
+						canScrollNext$.set(api.canScrollNext());
+						canScrollPrev$.set(api.canScrollPrev());
+						selectedScrollSnap$.set(api.selectedScrollSnap());
+					});
+					emblaApi.on('reInit', (api) => {
+						canScrollNext$.set(api.canScrollNext());
+						canScrollPrev$.set(api.canScrollPrev());
+						scrolling$.set(false);
+						selectedScrollSnap$.set(api.selectedScrollSnap());
+					});
+					canScrollNext$.set(emblaApi.canScrollNext());
+					canScrollPrev$.set(emblaApi.canScrollPrev());
+					return {
+						update: ({options, plugins}: {options: EmblaOptions; plugins: EmblaPluginType[]}) => {
+							emblaApi!.reInit(options, plugins);
+						},
+						destroy: () => {
+							emblaApi?.destroy();
+							emblaApi = undefined;
+						},
+					};
+				}),
+				computed(() => ({
+					options: emblaOptions$(),
+					plugins: plugins$(),
+				})),
+			),
+		},
+		actions: {},
+	};
+}
diff --git a/core/src/components/carousel/index.ts b/core/src/components/carousel/index.ts
new file mode 100644
index 0000000000..5f66438933
--- /dev/null
+++ b/core/src/components/carousel/index.ts
@@ -0,0 +1 @@
+export * from './carousel';
diff --git a/core/src/config.ts b/core/src/config.ts
index 0b3eda5de2..4063f1b127 100644
--- a/core/src/config.ts
+++ b/core/src/config.ts
@@ -10,6 +10,7 @@ import type {ProgressbarProps} from './components/progressbar/progressbar';
 import {identity} from './utils/internal/func';
 import type {SliderProps} from './components/slider/slider';
 import type {ToastProps} from './components/toast/toast';
+import type {CarouselProps} from './components/carousel';
 
 export type Partial2Levels<T> = Partial<{
 	[Level1 in keyof T]: Partial<T[Level1]>;
@@ -121,4 +122,8 @@ export type WidgetsConfig = {
 	 * toast widget config
 	 */
 	toast: ToastProps;
+	/**
+	 * carousel widget config
+	 */
+	carousel: CarouselProps;
 };
diff --git a/demo/src/lib/components-metadata.ts b/demo/src/lib/components-metadata.ts
index 77ea6e6511..34ebdd2b64 100644
--- a/demo/src/lib/components-metadata.ts
+++ b/demo/src/lib/components-metadata.ts
@@ -1,10 +1,11 @@
 import type {WidgetsConfig} from '@agnos-ui/svelte-bootstrap/config';
+// eslint-disable-next-line @agnos-ui/check-replace-imports
+import type {WidgetsConfig as HeadlessConfig} from '@agnos-ui/svelte-headless/config';
 
 export type ComponentStatus = 'stable' | 'beta' | 'inprogress' | 'deprecated';
 export type ComponentType = 'bootstrap' | 'standalone' | 'daisyUI';
 
 export interface ComponentMetadata<Props> {
-	title: string;
 	status: ComponentStatus;
 	since: string;
 	type: ComponentType;
@@ -14,19 +15,18 @@ export interface ComponentMetadata<Props> {
 
 // TODO once Select is added to the headless examples, remove the Partial
 type Metadata = Partial<{[WidgetName in keyof WidgetsConfig as Capitalize<WidgetName>]: ComponentMetadata<WidgetsConfig[WidgetName]>}>;
+type DaisyMetadata = Partial<{[WidgetName in keyof HeadlessConfig as Capitalize<WidgetName>]: ComponentMetadata<HeadlessConfig[WidgetName]>}>;
 
 /**
  * Metadata for each component
  */
 export const componentsMetadata: Metadata = {
 	Accordion: {
-		title: 'Accordion',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'bootstrap',
 	},
 	Alert: {
-		title: 'Alert',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'bootstrap',
@@ -35,7 +35,6 @@ export const componentsMetadata: Metadata = {
 		},
 	},
 	Modal: {
-		title: 'Modal',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'bootstrap',
@@ -46,38 +45,32 @@ export const componentsMetadata: Metadata = {
 		},
 	},
 	Pagination: {
-		title: 'Pagination',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'bootstrap',
 	},
 	Progressbar: {
-		title: 'Progressbar',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'bootstrap',
 	},
 	Rating: {
-		title: 'Rating',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'standalone',
 	},
 	Select: {
-		title: 'Select',
 		status: 'inprogress',
 		since: 'v0.1.1',
 		type: 'standalone',
 	},
 	Slider: {
-		title: 'Slider',
 		status: 'stable',
 		since: 'v0.1.1',
 		type: 'standalone',
 		includeStyles: true,
 	},
 	Toast: {
-		title: 'Toast',
 		status: 'stable',
 		since: 'v0.2.0',
 		type: 'bootstrap',
@@ -92,51 +85,48 @@ export const componentsMetadata: Metadata = {
 /**
  * Metadata for each component
  */
-export const daisyUIMetadata: Metadata = {
+export const daisyUIMetadata: DaisyMetadata = {
 	Accordion: {
-		title: 'Accordion',
 		status: 'stable',
 		since: 'v0.4.0',
 		type: 'daisyUI',
 	},
 	Alert: {
-		title: 'Alert',
 		status: 'stable',
 		since: 'v0.3.0',
 		type: 'daisyUI',
 	},
+	Carousel: {
+		status: 'beta',
+		since: 'v0.5.0',
+		type: 'standalone',
+	},
 	Modal: {
-		title: 'Modal',
 		status: 'stable',
 		since: 'v0.4.0',
 		type: 'daisyUI',
 	},
 	Pagination: {
-		title: 'Pagination',
 		status: 'stable',
 		since: 'v0.3.0',
 		type: 'daisyUI',
 	},
 	Progressbar: {
-		title: 'Progressbar',
 		status: 'stable',
 		since: 'v0.3.0',
 		type: 'daisyUI',
 	},
 	Rating: {
-		title: 'Rating',
 		status: 'stable',
 		since: 'v0.3.0',
 		type: 'daisyUI',
 	},
 	Slider: {
-		title: 'Slider',
 		status: 'stable',
 		since: 'v0.3.0',
 		type: 'daisyUI',
 	},
 	Toast: {
-		title: 'Toast',
 		status: 'stable',
 		since: 'v0.3.0',
 		type: 'daisyUI',
diff --git a/demo/src/lib/layout/StatusAlert.svelte b/demo/src/lib/layout/StatusAlert.svelte
index 6d4e6b671d..52b8744670 100644
--- a/demo/src/lib/layout/StatusAlert.svelte
+++ b/demo/src/lib/layout/StatusAlert.svelte
@@ -5,7 +5,7 @@
 	import {page} from '$app/stores';
 	import Svg from './Svg.svelte';
 
-	const regex = /\/(components|services)\/([^/]+)/;
+	const regex = /\/(components|services|daisyUI)\/([^/]+)/;
 	const typeIcon: Record<string, string> = {
 		info: biInfoCircleFill,
 		warning: biExclamationTriangleFill,
diff --git a/demo/src/lib/server/index.ts b/demo/src/lib/server/index.ts
index 64945c541a..dd0fc8c9f3 100644
--- a/demo/src/lib/server/index.ts
+++ b/demo/src/lib/server/index.ts
@@ -4,14 +4,14 @@ import frontMatter from 'front-matter';
 const validMdRegex = /^\d{2}-[a-zA-Z-]*\.md$/g;
 
 const componentsSubMenu = Object.entries(componentsMetadata).map(([key, val]) => ({
-	title: val.title,
+	title: key,
 	status: val.status,
 	slug: `components/${key.toLowerCase()}/`,
 	subpath: 'examples',
 }));
 
 const daisyUISubMenu = Object.entries(daisyUIMetadata).map(([key, val]) => ({
-	title: val.title,
+	title: key,
 	status: val.status,
 	slug: `daisyUI/${key.toLowerCase()}/`,
 	subpath: 'headless',
diff --git a/demo/src/lib/stackblitz/angular-daisyui/package-lock.json b/demo/src/lib/stackblitz/angular-daisyui/package-lock.json
index 43171ab9fb..092256a8cd 100644
--- a/demo/src/lib/stackblitz/angular-daisyui/package-lock.json
+++ b/demo/src/lib/stackblitz/angular-daisyui/package-lock.json
@@ -23,6 +23,7 @@
 				"@floating-ui/dom": "^1.6.10",
 				"autoprefixer": "^10.4.20",
 				"daisyui": "^4.12.10",
+				"embla-carousel-autoplay": "^8.1.8",
 				"postcss": "^8.4.41",
 				"rxjs": "^7.8.1",
 				"tailwindcss": "^3.4.9",
@@ -6634,6 +6635,24 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/embla-carousel": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
+			"integrity": "sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/embla-carousel-autoplay": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz",
+			"integrity": "sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"embla-carousel": "8.1.8"
+			}
+		},
 		"node_modules/emoji-regex": {
 			"version": "10.3.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
diff --git a/demo/src/lib/stackblitz/angular-daisyui/package.json b/demo/src/lib/stackblitz/angular-daisyui/package.json
index fb068cd4b3..748ee0977a 100644
--- a/demo/src/lib/stackblitz/angular-daisyui/package.json
+++ b/demo/src/lib/stackblitz/angular-daisyui/package.json
@@ -26,6 +26,7 @@
 		"@floating-ui/dom": "^1.6.10",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.10",
+		"embla-carousel-autoplay": "^8.1.8",
 		"postcss": "^8.4.41",
 		"rxjs": "^7.8.1",
 		"tailwindcss": "^3.4.9",
diff --git a/demo/src/lib/stackblitz/react-daisyui/package-lock.json b/demo/src/lib/stackblitz/react-daisyui/package-lock.json
index fa778970d8..11a6611ac1 100644
--- a/demo/src/lib/stackblitz/react-daisyui/package-lock.json
+++ b/demo/src/lib/stackblitz/react-daisyui/package-lock.json
@@ -15,6 +15,7 @@
 				"@vitejs/plugin-react": "^4.3.1",
 				"autoprefixer": "^10.4.20",
 				"daisyui": "^4.12.10",
+				"embla-carousel-autoplay": "^8.1.8",
 				"postcss": "^8.4.41",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
@@ -1948,6 +1949,24 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/embla-carousel": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
+			"integrity": "sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/embla-carousel-autoplay": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz",
+			"integrity": "sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"embla-carousel": "8.1.8"
+			}
+		},
 		"node_modules/emoji-regex": {
 			"version": "9.2.2",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
diff --git a/demo/src/lib/stackblitz/react-daisyui/package.json b/demo/src/lib/stackblitz/react-daisyui/package.json
index 4585a3694c..1d15679c6d 100644
--- a/demo/src/lib/stackblitz/react-daisyui/package.json
+++ b/demo/src/lib/stackblitz/react-daisyui/package.json
@@ -16,6 +16,7 @@
 		"@vitejs/plugin-react": "^4.3.1",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.10",
+		"embla-carousel-autoplay": "^8.1.8",
 		"postcss": "^8.4.41",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
diff --git a/demo/src/lib/stackblitz/svelte-daisyui/package-lock.json b/demo/src/lib/stackblitz/svelte-daisyui/package-lock.json
index 6e12e5aee6..97854c729c 100644
--- a/demo/src/lib/stackblitz/svelte-daisyui/package-lock.json
+++ b/demo/src/lib/stackblitz/svelte-daisyui/package-lock.json
@@ -14,6 +14,7 @@
 				"@tsconfig/svelte": "^5.0.4",
 				"autoprefixer": "^10.4.20",
 				"daisyui": "^4.12.10",
+				"embla-carousel-autoplay": "^8.1.8",
 				"postcss": "^8.4.41",
 				"sass": "^1.77.8",
 				"svelte": "^4.2.18",
@@ -1361,6 +1362,24 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/embla-carousel": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
+			"integrity": "sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/embla-carousel-autoplay": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz",
+			"integrity": "sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"embla-carousel": "8.1.8"
+			}
+		},
 		"node_modules/emoji-regex": {
 			"version": "9.2.2",
 			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
diff --git a/demo/src/lib/stackblitz/svelte-daisyui/package.json b/demo/src/lib/stackblitz/svelte-daisyui/package.json
index 28594a1684..d0696919c8 100644
--- a/demo/src/lib/stackblitz/svelte-daisyui/package.json
+++ b/demo/src/lib/stackblitz/svelte-daisyui/package.json
@@ -15,6 +15,7 @@
 		"@tsconfig/svelte": "^5.0.4",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.10",
+		"embla-carousel-autoplay": "^8.1.8",
 		"postcss": "^8.4.41",
 		"sass": "^1.77.8",
 		"svelte": "^4.2.18",
diff --git a/demo/src/routes/docs/[framework]/components/getMenu.ts b/demo/src/routes/docs/[framework]/components/getMenu.ts
index 943ed1e7a8..2d1abf9bcd 100644
--- a/demo/src/routes/docs/[framework]/components/getMenu.ts
+++ b/demo/src/routes/docs/[framework]/components/getMenu.ts
@@ -11,7 +11,7 @@ export function getMenu(component: string) {
 	const componentMetadata = componentsMetadata[componentCapitalized]!;
 
 	return {
-		title: componentMetadata.title,
+		title: componentCapitalized,
 		status: componentMetadata.status,
 		since: componentMetadata.since,
 		tabs: [
diff --git a/demo/src/routes/docs/[framework]/daisyUI/carousel/+layout.server.ts b/demo/src/routes/docs/[framework]/daisyUI/carousel/+layout.server.ts
new file mode 100644
index 0000000000..bbddfc15f2
--- /dev/null
+++ b/demo/src/routes/docs/[framework]/daisyUI/carousel/+layout.server.ts
@@ -0,0 +1,3 @@
+import {getMenu} from '../getMenu';
+
+export const load = () => getMenu('carousel');
diff --git a/demo/src/routes/docs/[framework]/daisyUI/carousel/headless/+page.svelte b/demo/src/routes/docs/[framework]/daisyUI/carousel/headless/+page.svelte
new file mode 100644
index 0000000000..cff9713521
--- /dev/null
+++ b/demo/src/routes/docs/[framework]/daisyUI/carousel/headless/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import daisyUIDefault from '@agnos-ui/samples/daisyui/carousel/default';
+	import demoGallery from '@agnos-ui/samples/daisyui/carousel/demoGallery';
+	import Sample from '$lib/layout/Sample.svelte';
+	import Section from '$lib/layout/Section.svelte';
+</script>
+
+<Section label="Headless" id="default" level={2}>
+	<p>
+		The headless Carousel simply wraps the <a href="https://www.embla-carousel.com/">Embla Carousel</a> as an AgnosUI widget, allowing the options and
+		plugins to be set through our configuration.
+	</p>
+	<Sample title="Headless example" sample={daisyUIDefault} height={450} />
+</Section>
+
+<Section label="Photo Gallery" id="photo-gallery" level={2}>
+	<p>
+		A classic usage of a Carousel is a Photo Gallery.<br />
+		The following example shows how to build such a component combining two carousels.
+	</p>
+	<Sample title="Photo gallery example" sample={demoGallery} height={630} noresize />
+</Section>
diff --git a/demo/src/routes/docs/[framework]/daisyUI/getMenu.ts b/demo/src/routes/docs/[framework]/daisyUI/getMenu.ts
index 9237b6da6a..785ee02c5e 100644
--- a/demo/src/routes/docs/[framework]/daisyUI/getMenu.ts
+++ b/demo/src/routes/docs/[framework]/daisyUI/getMenu.ts
@@ -11,7 +11,7 @@ export function getMenu(component: string) {
 	const componentMetadata = daisyUIMetadata[componentCapitalized]!;
 
 	return {
-		title: componentMetadata.title,
+		title: componentCapitalized,
 		status: componentMetadata.status,
 		since: componentMetadata.since,
 		tabs: [
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-default.html
new file mode 100644
index 0000000000..2d44d155df
--- /dev/null
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-default.html
@@ -0,0 +1,214 @@
+<body>
+	<div
+	 class="container mx-auto p-3"
+	 id="root"
+	>
+		<div
+		 class="flex justify-center w-full"
+		>
+			<div
+			 class="max-w-[600px] self-center"
+			>
+				<div
+				 class="active:cursor-grabbing cursor-grab overflow-hidden relative"
+				>
+					<div
+					 class="flex"
+					 style="transform: translate3d(0px, 0px, 0px);"
+					>
+						<div
+						 class="basis-full flex grow-0 justify-center min-w-0 shrink-0"
+						 style="transform: translate3d(0px, 0px, 0px);"
+						>
+							<img
+							 alt="random picsum"
+							 class="aspect-[4/3] object-contain select-none w-full"
+							 loading="lazy"
+							 src="https://picsum.photos/600/450.webp?random=1"
+							/>
+						</div>
+						<div
+						 class="basis-full flex grow-0 justify-center min-w-0 shrink-0"
+						>
+							<img
+							 alt="random picsum"
+							 class="aspect-[4/3] object-contain select-none w-full"
+							 loading="lazy"
+							 src="https://picsum.photos/600/450.webp?random=2"
+							/>
+						</div>
+						<div
+						 class="basis-full flex grow-0 justify-center min-w-0 shrink-0"
+						>
+							<img
+							 alt="random picsum"
+							 class="aspect-[4/3] object-contain select-none w-full"
+							 loading="lazy"
+							 src="https://picsum.photos/450/600.webp?random=3"
+							/>
+						</div>
+						<div
+						 class="basis-full flex grow-0 justify-center min-w-0 shrink-0"
+						>
+							<img
+							 alt="random picsum"
+							 class="aspect-[4/3] object-contain select-none w-full"
+							 loading="lazy"
+							 src="https://picsum.photos/600/450.webp?random=4"
+							/>
+						</div>
+						<div
+						 class="basis-full flex grow-0 justify-center min-w-0 shrink-0"
+						>
+							<img
+							 alt="random picsum"
+							 class="aspect-[4/3] object-contain select-none w-full"
+							 loading="lazy"
+							 src="https://picsum.photos/600/450.webp?random=5"
+							/>
+						</div>
+						<div
+						 class="basis-full flex grow-0 justify-center min-w-0 shrink-0"
+						>
+							<img
+							 alt="random picsum"
+							 class="aspect-[4/3] object-contain select-none w-full"
+							 loading="lazy"
+							 src="https://picsum.photos/600/450.webp?random=6"
+							/>
+						</div>
+					</div>
+					<div
+					 class="-translate-y-1/2 absolute flex justify-between left-5 right-5 top-1/2 transform"
+					>
+						<button
+						 aria-label="Go to previous slide"
+						 class="btn btn-circle btn-sm hover:opacity-100 md:btn-md opacity-75"
+						>
+							"❮"
+						</button>
+						<button
+						 aria-label="Go to next slide"
+						 class="btn btn-circle btn-sm hover:opacity-100 md:btn-md opacity-75"
+						>
+							"❯"
+						</button>
+					</div>
+					<div
+					 class="cursor-auto flex gap-2 justify-center py-2 w-full"
+					>
+						<button
+						 aria-label="Go to slide 1"
+						 class="btn btn-active btn-xs md:btn-sm"
+						>
+							"1"
+						</button>
+						<button
+						 aria-label="Go to slide 2"
+						 class="btn btn-xs md:btn-sm"
+						>
+							"2"
+						</button>
+						<button
+						 aria-label="Go to slide 3"
+						 class="btn btn-xs md:btn-sm"
+						>
+							"3"
+						</button>
+						<button
+						 aria-label="Go to slide 4"
+						 class="btn btn-xs md:btn-sm"
+						>
+							"4"
+						</button>
+						<button
+						 aria-label="Go to slide 5"
+						 class="btn btn-xs md:btn-sm"
+						>
+							"5"
+						</button>
+						<button
+						 aria-label="Go to slide 6"
+						 class="btn btn-xs md:btn-sm"
+						>
+							"6"
+						</button>
+					</div>
+				</div>
+				<div
+				 class="form-control items-start"
+				>
+					<label
+					 class="cursor-pointer gap-3 label"
+					>
+						<span
+						 class="label-text"
+						>
+							"Loop"
+						</span>
+						<input
+						 checked="checked"
+						 class="toggle toggle-primary"
+						 type="checkbox"
+						/>
+					</label>
+					<label
+					 class="cursor-pointer gap-3 label"
+					>
+						<span
+						 class="label-text"
+						>
+							"Autoplay"
+						</span>
+						<input
+						 checked="checked"
+						 class="toggle toggle-primary"
+						 type="checkbox"
+						/>
+					</label>
+					<label
+					 class="cursor-pointer gap-3 label"
+					>
+						<span
+						 class="label-text"
+						>
+							"Drag free"
+						</span>
+						<input
+						 class="toggle toggle-primary"
+						 type="checkbox"
+						/>
+					</label>
+					<label
+					 class="cursor-pointer gap-3 label"
+					>
+						<span
+						 class="label-text"
+						>
+							"Navigation Indicators"
+						</span>
+						<input
+						 checked="checked"
+						 class="toggle toggle-primary"
+						 type="checkbox"
+						/>
+					</label>
+					<label
+					 class="cursor-pointer gap-3 label"
+					>
+						<span
+						 class="label-text"
+						>
+							"Navigation Arrows"
+						</span>
+						<input
+						 checked="checked"
+						 class="toggle toggle-primary"
+						 type="checkbox"
+						/>
+					</label>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-demogallery.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-demogallery.html
new file mode 100644
index 0000000000..21a5f35ecf
--- /dev/null
+++ b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-carousel-demogallery.html
@@ -0,0 +1,501 @@
+<body>
+	<div
+	 class="container mx-auto p-3"
+	 id="root"
+	>
+		<div
+		 class="flex justify-center w-full"
+		>
+			<div
+			 class="lg:max-w-[1000px] max-w-[600px]"
+			>
+				<div
+				 class="grid grid-flow-row max-h-dvh"
+				>
+					<div
+					 class="active:cursor-grabbing cursor-grab overflow-hidden relative"
+					>
+						<div
+						 class="flex max-h-full"
+						 style="transform: translate3d(0px, 0px, 0px);"
+						>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<picture
+								 class="flex justify-center"
+								>
+									<source
+									 media="(max-width: 599px)"
+									 srcset="https://picsum.photos/id/36/600/450.webp"
+									/>
+									<source
+									 media="(min-width: 600px) and (max-width: 799px)"
+									 srcset="https://picsum.photos/id/36/800/600.webp"
+									/>
+									<source
+									 media="(min-width: 800px) and (max-width: 1199px)"
+									 srcset="https://picsum.photos/id/36/1200/900.webp"
+									/>
+									<source
+									 media="(min-width: 1200px)"
+									 srcset="https://picsum.photos/id/36/1600/1200.webp"
+									/>
+									<img
+									 alt="random picsum"
+									 class="duration-300 ease-in-out object-contain opacity-0 opacity-100 select-none transition-opacity"
+									 loading="lazy"
+									 src="https://picsum.photos/id/36/1600/1200.webp"
+									 style="aspect-ratio: 1.33333 / 1;"
+									/>
+								</picture>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<picture
+								 class="flex justify-center"
+								>
+									<source
+									 media="(max-width: 599px)"
+									 srcset="https://picsum.photos/id/43/600/450.webp"
+									/>
+									<source
+									 media="(min-width: 600px) and (max-width: 799px)"
+									 srcset="https://picsum.photos/id/43/800/600.webp"
+									/>
+									<source
+									 media="(min-width: 800px) and (max-width: 1199px)"
+									 srcset="https://picsum.photos/id/43/1200/900.webp"
+									/>
+									<source
+									 media="(min-width: 1200px)"
+									 srcset="https://picsum.photos/id/43/1600/1200.webp"
+									/>
+									<img
+									 alt="random picsum"
+									 class="duration-300 ease-in-out object-contain opacity-0 opacity-100 select-none transition-opacity"
+									 loading="lazy"
+									 src="https://picsum.photos/id/43/1600/1200.webp"
+									 style="aspect-ratio: 1.33333 / 1;"
+									/>
+								</picture>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+							<div
+							 class="basis-full flex grow-0 justify-center min-w-0 relative shrink-0"
+							>
+								<div
+								 class="h-full skeleton w-full"
+								/>
+							</div>
+						</div>
+						<div
+						 class="-translate-y-1/2 absolute flex justify-between left-5 right-5 top-1/2 transform"
+						>
+							<button
+							 aria-label="Go to previous photo"
+							 class="btn btn-circle btn-sm hover:opacity-100 md:btn-md opacity-75"
+							 disabled="disabled"
+							>
+								"❮"
+							</button>
+							<button
+							 aria-label="Go to next photo"
+							 class="btn btn-circle btn-sm hover:opacity-100 md:btn-md opacity-75"
+							>
+								"❯"
+							</button>
+						</div>
+						<div
+						 class="absolute bottom-5 flex right-5"
+						>
+							<button
+							 aria-label="open photo in fullscreen"
+							 class="btn btn-sm hover:opacity-100 md:btn-md opacity-75"
+							>
+								<svg
+								 style="width: 1em; height: 1em; vertical-align: -0.125em;"
+								 viewBox="0 0 448 512"
+								 xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+									 d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z"
+									 fill="currentColor"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<div
+					 class="mb-2 mt-1 overflow-hidden relative"
+					>
+						<div
+						 class="auto-cols-max gap-2 grid grid-flow-col mx-1 my-1"
+						 style="transform: translate3d(0px, 0px, 0px);"
+						>
+							<button
+							 aria-label="Go to photo 1"
+							 class="ring shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/36/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 2"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/43/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 3"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/70/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 4"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/102/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 5"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/124/90/120.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 6"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/142/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 7"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/156/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 8"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/242/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 9"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/288/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 10"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/289/90/120.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 11"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/295/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 12"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/361/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 13"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/400/90/120.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 14"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/488/90/120.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 15"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/496/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 16"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/515/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 17"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/557/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 18"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/607/90/120.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 19"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/623/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+							<button
+							 aria-label="Go to photo 20"
+							 class="shadow-primary"
+							>
+								<img
+								 alt="random picsum"
+								 class="select-none"
+								 loading="lazy"
+								 src="https://picsum.photos/id/645/120/90.webp"
+								 style="aspect-ratio: 1.33333 / 1;"
+								/>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 404b2efcb3..11b8c595ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -231,6 +231,7 @@
 			"peerDependencies": {
 				"@amadeus-it-group/tansu": "^1.0.0",
 				"@floating-ui/dom": "^1.6.10",
+				"embla-carousel": "^8.1.7",
 				"esm-env": "^1.0.0"
 			}
 		},
@@ -10726,6 +10727,23 @@
 			"version": "1.5.4",
 			"license": "ISC"
 		},
+		"node_modules/embla-carousel": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.8.tgz",
+			"integrity": "sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA==",
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/embla-carousel-autoplay": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz",
+			"integrity": "sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"embla-carousel": "8.1.8"
+			}
+		},
 		"node_modules/emoji-regex": {
 			"version": "9.2.2",
 			"dev": true,
@@ -23594,6 +23612,7 @@
 				"@sveltejs/vite-plugin-svelte": "^3.1.1",
 				"autoprefixer": "^10.4.20",
 				"daisyui": "^4.12.10",
+				"embla-carousel-autoplay": "^8.1.8",
 				"eslint-plugin-svelte": "^2.43.0",
 				"postcss": "^8.4.41",
 				"prettier-plugin-svelte": "^3.2.6",
diff --git a/react/demo/src/daisyui/samples/carousel/Carousel.tsx b/react/demo/src/daisyui/samples/carousel/Carousel.tsx
new file mode 100644
index 0000000000..e5861ee59f
--- /dev/null
+++ b/react/demo/src/daisyui/samples/carousel/Carousel.tsx
@@ -0,0 +1,80 @@
+import {type CarouselProps, createCarousel} from '@agnos-ui/react-headless/components/carousel';
+import {useWidgetWithConfig} from '@agnos-ui/react-headless/config';
+import {useDirective} from '@agnos-ui/react-headless/utils/directive';
+import classNames from 'classnames';
+import AutoPlay from 'embla-carousel-autoplay';
+import {useMemo, type ReactNode} from 'react';
+
+export function Carousel<Item>(
+	props: Partial<Omit<CarouselProps, 'plugins'>> & {
+		items: Item[];
+		withNavArrows?: boolean;
+		withNavIndicators?: boolean;
+		autoplay?: boolean;
+		slide: (props: {item: Item}) => ReactNode;
+	},
+) {
+	const [
+		state,
+		{
+			patch,
+			directives: {emblaDirective},
+			api: {scrollPrev, scrollNext, scrollTo},
+		},
+	] = useWidgetWithConfig(createCarousel, props, 'carousel');
+	useMemo(() => {
+		if (props.autoplay) {
+			patch({plugins: [AutoPlay({playOnInit: true, stopOnInteraction: false, stopOnMouseEnter: true, stopOnFocusIn: true})]});
+		} else {
+			patch({plugins: []});
+		}
+	}, [props.autoplay]);
+	const Slide = props.slide;
+	return (
+		<div className="overflow-hidden relative cursor-grab active:cursor-grabbing" {...useDirective(emblaDirective)}>
+			<div className="flex">
+				{props.items.map((item, index) => (
+					<div className="basis-full min-w-0 shrink-0 grow-0 flex justify-center" key={index}>
+						<Slide item={item} />
+					</div>
+				))}
+			</div>
+			{props.withNavArrows && (
+				<div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+					<button
+						className="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+						onPointerDown={(e) => e.preventDefault()}
+						disabled={!state.canScrollPrev}
+						onClick={scrollPrev}
+						aria-label="Go to previous slide"
+					>
+						❮
+					</button>
+					<button
+						className="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+						onPointerDown={(e) => e.preventDefault()}
+						disabled={!state.canScrollNext}
+						onClick={scrollNext}
+						aria-label="Go to next slide"
+					>
+						❯
+					</button>
+				</div>
+			)}
+			{props.withNavIndicators && (
+				<div className="flex w-full justify-center gap-2 py-2 cursor-auto">
+					{props.items.map((_, index) => (
+						<button
+							className={classNames('btn', 'btn-xs', 'md:btn-sm', {'btn-active': state.selectedScrollSnap === index})}
+							onClick={() => scrollTo(index)}
+							aria-label={`Go to slide ${index + 1}`}
+							key={index}
+						>
+							{index + 1}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/react/demo/src/daisyui/samples/carousel/Default.route.tsx b/react/demo/src/daisyui/samples/carousel/Default.route.tsx
new file mode 100644
index 0000000000..f846822f8f
--- /dev/null
+++ b/react/demo/src/daisyui/samples/carousel/Default.route.tsx
@@ -0,0 +1,74 @@
+import classNames from 'classnames';
+import {Carousel} from './Carousel';
+import {useMemo, useState} from 'react';
+
+const photos = [
+	'https://picsum.photos/600/450.webp?random=1',
+	'https://picsum.photos/600/450.webp?random=2',
+	'https://picsum.photos/450/600.webp?random=3',
+	'https://picsum.photos/600/450.webp?random=4',
+	'https://picsum.photos/600/450.webp?random=5',
+	'https://picsum.photos/600/450.webp?random=6',
+];
+
+const Slide = ({item}: {item: string}) => (
+	<img className="select-none object-contain aspect-[4/3] w-full" alt="random picsum" src={item} loading="lazy" />
+);
+
+const DemoCarousel = () => {
+	const [loop, setLoop] = useState(true);
+	const [withNavArrows, setWithNavArrows] = useState(true);
+	const [withNavIndicators, setWithNavIndicators] = useState(true);
+	const [dragFree, setDragFree] = useState(false);
+	const [_autoplay, setAutoplay] = useState(true);
+	const autoPlay = useMemo(() => loop && _autoplay, [_autoplay, loop]);
+	return (
+		<div className="w-full flex justify-center">
+			<div className="max-w-[600px] self-center">
+				<Carousel
+					items={photos}
+					slide={Slide}
+					withNavArrows={withNavArrows}
+					withNavIndicators={withNavIndicators}
+					loop={loop}
+					autoplay={autoPlay}
+					dragFree={dragFree}
+				/>
+				<div className="form-control items-start">
+					<label className="label cursor-pointer gap-3">
+						<span className="label-text">Loop</span>
+						<input type="checkbox" className="toggle toggle-primary" checked={loop} onChange={(e) => setLoop(e.target.checked)} />
+					</label>
+					<label className={classNames('label', 'gap-3', {'cursor-pointer': loop})}>
+						<span className="label-text">Autoplay</span>
+						<input
+							type="checkbox"
+							className="toggle toggle-primary"
+							checked={_autoplay}
+							onChange={(e) => setAutoplay(e.target.checked)}
+							disabled={!loop}
+						/>
+					</label>
+					<label className="label cursor-pointer gap-3">
+						<span className="label-text">Drag free</span>
+						<input type="checkbox" className="toggle toggle-primary" checked={dragFree} onChange={(e) => setDragFree(e.target.checked)} />
+					</label>
+					<label className="label cursor-pointer gap-3">
+						<span className="label-text">Navigation Indicators</span>
+						<input
+							type="checkbox"
+							className="toggle toggle-primary"
+							checked={withNavIndicators}
+							onChange={(e) => setWithNavIndicators(e.target.checked)}
+						/>
+					</label>
+					<label className="label cursor-pointer gap-3">
+						<span className="label-text">Navigation Arrows</span>
+						<input type="checkbox" className="toggle toggle-primary" checked={withNavArrows} onChange={(e) => setWithNavArrows(e.target.checked)} />
+					</label>
+				</div>
+			</div>
+		</div>
+	);
+};
+export default DemoCarousel;
diff --git a/react/demo/src/daisyui/samples/carousel/DemoGallery.route.tsx b/react/demo/src/daisyui/samples/carousel/DemoGallery.route.tsx
new file mode 100644
index 0000000000..3284bbae95
--- /dev/null
+++ b/react/demo/src/daisyui/samples/carousel/DemoGallery.route.tsx
@@ -0,0 +1,11 @@
+import {Gallery} from './Gallery';
+import {photos} from '@agnos-ui/common/samples/carousel/photo';
+
+const DemoGallery = () => (
+	<div className="w-full flex justify-center">
+		<div className="max-w-[600px] lg:max-w-[1000px]">
+			<Gallery photos={photos} withNavArrows withShowFullscreen />
+		</div>
+	</div>
+);
+export default DemoGallery;
diff --git a/react/demo/src/daisyui/samples/carousel/Gallery.tsx b/react/demo/src/daisyui/samples/carousel/Gallery.tsx
new file mode 100644
index 0000000000..00968ad503
--- /dev/null
+++ b/react/demo/src/daisyui/samples/carousel/Gallery.tsx
@@ -0,0 +1,165 @@
+import type {Photo} from '@agnos-ui/common/samples/carousel/photo';
+import {createCarousel} from '@agnos-ui/react-headless/components/carousel';
+import {useDirective} from '@agnos-ui/react-headless/utils/directive';
+import {useObservable} from '@agnos-ui/react-headless/utils/stores';
+import classNames from 'classnames';
+import {useEffect, useMemo, useRef, useState} from 'react';
+import ExpandSvg from '@agnos-ui/common/samples/carousel/expand.svg?react';
+import CompressSvg from '@agnos-ui/common/samples/carousel/compress.svg?react';
+
+const ImageSlide = ({
+	sources,
+	src,
+	alt,
+	loadRequested,
+	aspectRatio,
+	toShow,
+}: Photo & {loadRequested: boolean; aspectRatio: number; toShow: boolean}) => {
+	const spinnerRef = useRef<HTMLSpanElement>(null);
+	const [imgLoaded, setImgLoaded] = useState(false);
+	return (
+		<div className="relative basis-full min-w-0 shrink-0 grow-0 flex justify-center">
+			{loadRequested ? (
+				<>
+					{!imgLoaded && (
+						<span className="absolute top-1/2 -translate-y-1/2 left-1/2 loading loading-spinner loading-lg text-primary" ref={spinnerRef}></span>
+					)}
+					<picture className="flex justify-center">
+						{sources.map(({media, srcset}, index) => (
+							<source media={media} srcSet={srcset} key={index} />
+						))}
+						<img
+							className={classNames('select-none', 'object-contain', 'transition-opacity', 'ease-in-out', 'duration-300', 'opacity-0', {
+								'opacity-100': toShow,
+							})}
+							alt={alt}
+							src={src}
+							loading="lazy"
+							style={{aspectRatio}}
+							onLoad={() => setImgLoaded(true)}
+						/>
+					</picture>
+				</>
+			) : (
+				<div className="skeleton w-full h-full"></div>
+			)}
+		</div>
+	);
+};
+
+export const Gallery = ({
+	photos,
+	withNavArrows = false,
+	withShowFullscreen = false,
+	aspectRatio = 4 / 3,
+}: {
+	photos: Photo[];
+	withNavArrows?: boolean;
+	withShowFullscreen?: boolean;
+	aspectRatio?: number;
+}) => {
+	const [photosWithLoadState, setPhotosWithLoadState] = useState(photos.map((photo, index) => ({...photo, loadRequested: index === 0})));
+
+	const mainCarousel = useMemo(() => createCarousel(), []);
+	const mainCarouselState = useObservable(mainCarousel.state$);
+	const thumbCarousel = useMemo(
+		() =>
+			createCarousel({
+				props: {
+					dragFree: true,
+					containScroll: 'keepSnaps',
+				},
+			}),
+		[],
+	);
+
+	const refMainContainer = useRef<HTMLDivElement>(null);
+	const canFullScreen = !!document?.fullscreenEnabled && withShowFullscreen;
+	const [isFullScreen, setIsFullScreen] = useState(false);
+	const toggleFullScreen = () => {
+		if (!isFullScreen) {
+			refMainContainer.current!.requestFullscreen();
+		} else {
+			document.exitFullscreen();
+		}
+		setIsFullScreen(!isFullScreen);
+	};
+	useEffect(
+		() =>
+			mainCarousel.stores.selectedScrollSnap$.subscribe((selectedSnap: number) => {
+				thumbCarousel.api.scrollTo(selectedSnap);
+				setPhotosWithLoadState(
+					photosWithLoadState.map((photoWithLoadState, index) =>
+						Math.abs(index - selectedSnap) <= 1 && !photoWithLoadState.loadRequested
+							? {...photoWithLoadState, loadRequested: true}
+							: photoWithLoadState,
+					),
+				);
+			}),
+		[],
+	);
+
+	return (
+		<div ref={refMainContainer} className="grid grid-flow-row max-h-dvh">
+			<div className="overflow-hidden relative cursor-grab active:cursor-grabbing" {...useDirective(mainCarousel.directives.emblaDirective)}>
+				<div className="flex max-h-full">
+					{photosWithLoadState.map((photoWithLoadState, index) => (
+						<ImageSlide
+							key={index}
+							{...photoWithLoadState}
+							aspectRatio={aspectRatio}
+							toShow={Math.abs(mainCarouselState.selectedScrollSnap - index) <= 2}
+						/>
+					))}
+				</div>
+				{withNavArrows && (
+					<div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+						<button
+							className="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+							onPointerDown={(e) => e.preventDefault()}
+							disabled={!mainCarouselState.canScrollPrev}
+							onClick={mainCarousel.api.scrollPrev}
+							aria-label="Go to previous photo"
+						>
+							❮
+						</button>
+						<button
+							className="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+							onPointerDown={(e) => e.preventDefault()}
+							disabled={!mainCarouselState.canScrollNext}
+							onClick={mainCarousel.api.scrollNext}
+							aria-label="Go to next photo"
+						>
+							❯
+						</button>
+					</div>
+				)}
+				{canFullScreen && (
+					<div className="absolute right-5 bottom-5 flex">
+						<button
+							className="btn btn-sm md:btn-md opacity-75 hover:opacity-100"
+							onClick={toggleFullScreen}
+							aria-label={isFullScreen ? 'leave fullscreen' : 'open photo in fullscreen'}
+						>
+							{isFullScreen ? <CompressSvg /> : <ExpandSvg />}
+						</button>
+					</div>
+				)}
+			</div>
+			<div className="overflow-hidden relative mt-1 mb-2" {...useDirective(thumbCarousel.directives.emblaDirective)}>
+				<div className="grid grid-flow-col auto-cols-max gap-2 mx-1 my-1">
+					{photos.map(({thumbnail}, index) => (
+						<button
+							className={classNames('shadow-primary', {ring: mainCarouselState.selectedScrollSnap === index})}
+							onClick={() => mainCarousel.api.scrollTo(index, Math.abs(mainCarouselState.selectedScrollSnap - index) > 2)}
+							aria-label={`Go to photo ${index + 1}`}
+							key={index}
+						>
+							<img className="select-none" alt="random picsum" src={thumbnail} loading="lazy" style={{aspectRatio}} />
+						</button>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/svelte/demo/package.json b/svelte/demo/package.json
index 833db67ae4..be8e7eb3eb 100644
--- a/svelte/demo/package.json
+++ b/svelte/demo/package.json
@@ -88,6 +88,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.10",
+		"embla-carousel-autoplay": "^8.1.8",
 		"eslint-plugin-svelte": "^2.43.0",
 		"postcss": "^8.4.41",
 		"prettier-plugin-svelte": "^3.2.6",
diff --git a/svelte/demo/src/daisyui/samples/carousel/Carousel.svelte b/svelte/demo/src/daisyui/samples/carousel/Carousel.svelte
new file mode 100644
index 0000000000..322008b528
--- /dev/null
+++ b/svelte/demo/src/daisyui/samples/carousel/Carousel.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import {type CarouselProps, createCarousel} from '@agnos-ui/svelte-headless/components/carousel';
+	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
+	import AutoPlay from 'embla-carousel-autoplay';
+
+	type Item = $$Generic; // eslint-disable-line no-undef
+	type $$Props = Partial<Omit<CarouselProps, 'plugins'>> & {
+		items: Item[];
+		withNavArrows?: boolean;
+		withNavIndicators?: boolean;
+		autoplay?: boolean;
+	};
+
+	export let items: Item[];
+	export let withNavArrows = false;
+	export let withNavIndicators = false;
+	export let autoplay = false;
+
+	const {
+		stores: {canScrollNext$, canScrollPrev$, selectedScrollSnap$},
+		directives: {emblaDirective},
+		patchChangedProps,
+		patch,
+		api: {scrollNext, scrollPrev, scrollTo},
+	} = callWidgetFactory({
+		factory: createCarousel,
+		widgetName: 'carousel',
+		$$props,
+	});
+	$: patchChangedProps($$props);
+	$: {
+		if (autoplay) {
+			patch({plugins: [AutoPlay({playOnInit: true, stopOnInteraction: false, stopOnMouseEnter: true, stopOnFocusIn: true})]});
+		} else {
+			patch({plugins: []});
+		}
+	}
+</script>
+
+<div class="overflow-hidden relative cursor-grab active:cursor-grabbing" use:emblaDirective>
+	<div class="flex">
+		{#each items as item, index (index)}
+			<div class="basis-full min-w-0 shrink-0 grow-0 flex justify-center">
+				<slot prop={item} />
+			</div>
+		{/each}
+	</div>
+	{#if withNavArrows}
+		<div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+			<button
+				class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+				on:pointerdown|preventDefault
+				disabled={!$canScrollPrev$}
+				on:click={scrollPrev}
+				aria-label="Go to previous slide">❮</button
+			>
+			<button
+				class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+				on:pointerdown|preventDefault
+				disabled={!$canScrollNext$}
+				on:click={scrollNext}
+				aria-label="Go to next slide">❯</button
+			>
+		</div>
+	{/if}
+	{#if withNavIndicators}
+		<div class="flex w-full justify-center gap-2 py-2 cursor-auto">
+			{#each items as _, index}
+				<button
+					class="btn btn-xs md:btn-sm"
+					class:btn-active={$selectedScrollSnap$ === index}
+					on:click={() => scrollTo(index)}
+					aria-label="Go to slide {index + 1}">{index + 1}</button
+				>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/svelte/demo/src/daisyui/samples/carousel/Default.route.svelte b/svelte/demo/src/daisyui/samples/carousel/Default.route.svelte
new file mode 100644
index 0000000000..6216bb9367
--- /dev/null
+++ b/svelte/demo/src/daisyui/samples/carousel/Default.route.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Carousel from './Carousel.svelte';
+
+	const photos = [
+		'https://picsum.photos/600/450.webp?random=1',
+		'https://picsum.photos/600/450.webp?random=2',
+		'https://picsum.photos/450/600.webp?random=3',
+		'https://picsum.photos/600/450.webp?random=4',
+		'https://picsum.photos/600/450.webp?random=5',
+		'https://picsum.photos/600/450.webp?random=6',
+	];
+
+	let loop = true;
+	let withNavArrows = true;
+	let withNavIndicators = true;
+	let dragFree = false;
+	let _autoplay = true;
+	$: autoplay = loop && _autoplay;
+</script>
+
+<div class="w-full flex justify-center">
+	<div class="max-w-[600px] self-center">
+		<Carousel items={photos} let:prop={photo} {withNavArrows} {withNavIndicators} {loop} {dragFree} {autoplay}>
+			<img class="select-none object-contain aspect-[4/3] w-full" alt="random picsum" src={photo} loading="lazy" />
+		</Carousel>
+		<div class="form-control items-start">
+			<label class="label cursor-pointer gap-3">
+				<span class="label-text">Loop</span>
+				<input type="checkbox" class="toggle toggle-primary" bind:checked={loop} />
+			</label>
+			<label class="label gap-3" class:cursor-pointer={loop}>
+				<span class="label-text">Autoplay</span>
+				<input type="checkbox" class="toggle toggle-primary" bind:checked={_autoplay} disabled={!loop} />
+			</label>
+			<label class="label cursor-pointer gap-3">
+				<span class="label-text">Drag free</span>
+				<input type="checkbox" class="toggle toggle-primary" bind:checked={dragFree} />
+			</label>
+			<label class="label cursor-pointer gap-3">
+				<span class="label-text">Navigation Indicators</span>
+				<input type="checkbox" class="toggle toggle-primary" bind:checked={withNavIndicators} />
+			</label>
+			<label class="label cursor-pointer gap-3">
+				<span class="label-text">Navigation Arrows</span>
+				<input type="checkbox" class="toggle toggle-primary" bind:checked={withNavArrows} />
+			</label>
+		</div>
+	</div>
+</div>
diff --git a/svelte/demo/src/daisyui/samples/carousel/DemoGallery.route.svelte b/svelte/demo/src/daisyui/samples/carousel/DemoGallery.route.svelte
new file mode 100644
index 0000000000..7896a1756b
--- /dev/null
+++ b/svelte/demo/src/daisyui/samples/carousel/DemoGallery.route.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Gallery from './Gallery.svelte';
+	import {photos} from '@agnos-ui/common/samples/carousel/photo';
+</script>
+
+<div class="w-full flex justify-center">
+	<div class="max-w-[600px] lg:max-w-[1000px]">
+		<Gallery {photos} withNavArrows withShowFullscreen />
+	</div>
+</div>
diff --git a/svelte/demo/src/daisyui/samples/carousel/Gallery.svelte b/svelte/demo/src/daisyui/samples/carousel/Gallery.svelte
new file mode 100644
index 0000000000..145c0de60a
--- /dev/null
+++ b/svelte/demo/src/daisyui/samples/carousel/Gallery.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import {createCarousel} from '@agnos-ui/svelte-headless/components/carousel';
+	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
+	import {onMount} from 'svelte';
+	import type {Photo} from '@agnos-ui/common/samples/carousel/photo';
+	import GalleryImage from './GalleryImage.svelte';
+	import expandSvg from '@agnos-ui/common/samples/carousel/expand.svg?raw';
+	import compressSvg from '@agnos-ui/common/samples/carousel/compress.svg?raw';
+
+	export let photos: Photo[];
+	export let withNavArrows = false;
+	export let withShowFullscreen = false;
+	export let aspectRatio = 4 / 3;
+
+	$: photosWithLoadState = photos.map((photo, index) => ({...photo, loadRequested: index === 0}));
+
+	// The main Carousel
+	const {
+		stores: {canScrollNext$, canScrollPrev$, selectedScrollSnap$},
+		directives: {emblaDirective},
+		api: {scrollNext, scrollPrev, scrollTo},
+	} = callWidgetFactory({
+		factory: createCarousel,
+		widgetName: 'carousel',
+		$$props: {},
+	});
+
+	// The Thumbnail Carousel
+	const {
+		directives: {emblaDirective: thumbDirective},
+		api: {scrollTo: thumbScrollTo},
+	} = callWidgetFactory({
+		factory: createCarousel,
+		widgetName: 'carousel',
+		$$props: {
+			dragFree: true,
+			containScroll: 'keepSnaps',
+		},
+	});
+
+	$: canFullScreen = !!document?.fullscreenEnabled && withShowFullscreen;
+	let isFullScreen = false;
+
+	let mainContainer: HTMLDivElement;
+
+	const toggleFullScreen = () => {
+		if (!isFullScreen) {
+			mainContainer.requestFullscreen();
+		} else {
+			document.exitFullscreen();
+		}
+		isFullScreen = !isFullScreen;
+	};
+
+	onMount(() =>
+		selectedScrollSnap$.subscribe((selectedSnap: number) => {
+			thumbScrollTo(selectedSnap);
+			photosWithLoadState[selectedSnap].loadRequested = true;
+			if (selectedSnap > 0) {
+				photosWithLoadState[selectedSnap - 1].loadRequested = true;
+			}
+			if (selectedSnap < photosWithLoadState.length - 1) {
+				photosWithLoadState[selectedSnap + 1].loadRequested = true;
+			}
+		}),
+	);
+</script>
+
+<div bind:this={mainContainer} class="grid grid-flow-row max-h-dvh">
+	<div class="overflow-hidden relative cursor-grab active:cursor-grabbing" use:emblaDirective>
+		<div class="flex max-h-full">
+			{#each photosWithLoadState as { src, alt, sources, loadRequested }, index (index)}
+				<GalleryImage {src} {alt} {sources} {loadRequested} {aspectRatio} toShow={Math.abs($selectedScrollSnap$ - index) <= 2} />
+			{/each}
+		</div>
+		{#if withNavArrows}
+			<div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+				<button
+					class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+					on:pointerdown|preventDefault
+					disabled={!$canScrollPrev$}
+					on:click={scrollPrev}
+					aria-label="Go to previous photo">❮</button
+				>
+				<button
+					class="btn btn-sm md:btn-md btn-circle opacity-75 hover:opacity-100"
+					on:pointerdown|preventDefault
+					disabled={!$canScrollNext$}
+					on:click={scrollNext}
+					aria-label="Go to next photo">❯</button
+				>
+			</div>
+		{/if}
+		{#if canFullScreen}
+			<div class="absolute right-5 bottom-5 flex">
+				<button
+					class="btn btn-sm md:btn-md opacity-75 hover:opacity-100"
+					on:click={toggleFullScreen}
+					aria-label={isFullScreen ? 'leave fullscreen' : 'open photo in fullscreen'}
+				>
+					{@html isFullScreen ? compressSvg : expandSvg}
+				</button>
+			</div>
+		{/if}
+	</div>
+	<div class="overflow-hidden relative mt-1 mb-2" use:thumbDirective>
+		<div class="grid grid-flow-col auto-cols-max gap-2 mx-1 my-1">
+			{#each photos as { thumbnail }, index}
+				<button
+					class="shadow-primary"
+					on:click={() => scrollTo(index, Math.abs($selectedScrollSnap$ - index) > 2)}
+					class:ring={$selectedScrollSnap$ === index}
+					aria-label="Go to photo {index + 1}"
+				>
+					<img class="select-none" alt="random picsum" src={thumbnail} loading="lazy" style:aspect-ratio={aspectRatio} />
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/svelte/demo/src/daisyui/samples/carousel/GalleryImage.svelte b/svelte/demo/src/daisyui/samples/carousel/GalleryImage.svelte
new file mode 100644
index 0000000000..509f2dbad0
--- /dev/null
+++ b/svelte/demo/src/daisyui/samples/carousel/GalleryImage.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type {Source} from '@agnos-ui/common/samples/carousel/photo';
+
+	export let loadRequested;
+	export let sources: Source[];
+	export let src: string;
+	export let alt: string;
+	export let aspectRatio: number;
+	export let toShow: boolean;
+
+	let imageLoaded = false;
+</script>
+
+<div class="relative basis-full min-w-0 shrink-0 grow-0 flex justify-center">
+	{#if loadRequested}
+		{#if !imageLoaded}
+			<span class="absolute top-1/2 -translate-y-1/2 left-1/2 loading loading-spinner loading-lg text-primary"></span>
+		{/if}
+		<picture class="flex justify-center">
+			{#each sources as { media, srcset }}
+				<source {media} {srcset} />
+			{/each}
+			<img
+				class="select-none object-contain transition-opacity ease-in-out duration-300 opacity-0"
+				class:opacity-100={toShow}
+				{alt}
+				{src}
+				loading="lazy"
+				style:aspect-ratio={aspectRatio}
+				on:load={() => (imageLoaded = true)}
+			/>
+		</picture>
+	{:else}
+		<div class="skeleton w-full h-full"></div>
+	{/if}
+</div>