⬆️ Update Carousel syntax to Svelte 5

Frontendland · Frontendland · commit e562a064f753 · 2025-07-31T08:44:59.000+02:00
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
@@ -13,25 +13,28 @@
 
     import type { PaginationEventType } from '../Pagination/pagination'
 
-    export let items: SvelteCarouselProps['items'] = 0
-    export let itemsPerSlide: SvelteCarouselProps['itemsPerSlide'] = 1
-    export let subText: SvelteCarouselProps['subText'] = ''
-    export let scrollSnap: SvelteCarouselProps['scrollSnap'] = true
-    export let progress: SvelteCarouselProps['progress'] = false
-    export let pagination: SvelteCarouselProps['pagination'] = {}
-    export let effect: SvelteCarouselProps['effect'] = null
-    export let debounce: SvelteCarouselProps['debounce'] = 20
-    export let className: SvelteCarouselProps['className'] = ''
-    export let wrapperClassName: SvelteCarouselProps['wrapperClassName'] = ''
-    export let paginationClassName: SvelteCarouselProps['paginationClassName'] = ''
-    export let onScroll: SvelteCarouselProps['onScroll'] = () => {}
+    let {
+        items = 0,
+        itemsPerSlide = 1,
+        subText,
+        scrollSnap = true,
+        progress,
+        pagination,
+        effect,
+        debounce = 20,
+        className,
+        wrapperClassName,
+        paginationClassName,
+        children,
+        onScroll
+    }: SvelteCarouselProps = $props()
 
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
     let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
-    let progressValue = 0
+    let progressValue = $state(0)
     let paginated = false
-    let currentPage = 1
+    let currentPage = $state(1)
 
     const classes = classNames([
         styles.carousel,
@@ -141,7 +144,7 @@
 <section class={classes}>
     <div class={containerClasses} bind:this={carouselContainer}>
         <ul class={wrapperClasses} style={style} bind:this={carousel}>
-            <slot />
+            {@render children?.()}
         </ul>
     </div>
     <ConditionalWrapper
diff --git a/src/components/Pagination/Pagination.svelte b/src/components/Pagination/Pagination.svelte
@@ -66,7 +66,7 @@
         })
     }
 
-    let calculatedCurrentPage = $state(
+    let calculatedCurrentPage = $derived(
         currentPage
             || (pages?.findIndex(page => page.active) || -1) + 1
             || 1
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
@@ -196,7 +196,7 @@ const ReactPlayground = () => {
             <Card title="Progress">
                 <Progress value={progress} />
 
-                <div className="flex xs my">
+                <div className="flex xs my wrap">
                     <Button onClick={() => setProgress(0)}>0%</Button>
                     <Button onClick={() => setProgress(25)}>25%</Button>
                     <Button onClick={() => setProgress(50)}>50%</Button>
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
@@ -199,7 +199,7 @@
     <Card title="Progress">
         <Progress value={progress} />
 
-        <div class="flex xs my">
+        <div class="flex xs my wrap">
             <Button onClick={() => progress = 0}>0%</Button>
             <Button onClick={() => progress = 25}>25%</Button>
             <Button onClick={() => progress = 50}>50%</Button>

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`})`
`67`	`67`	`}`
`68`	`68`
`69`		`- let calculatedCurrentPage = $state(`
	`69`	`+ let calculatedCurrentPage = $derived(`
`70`	`70`	`currentPage`
`71`	`71`	`\|\| (pages?.findIndex(page => page.active) \|\| -1) + 1`
`72`	`72`	`\|\| 1`