fix: Carousel Advanced customization use arrow fn for Svelte 5

themesberg · Jun 29, 2024 · 4398c29 · 4398c29
1 parent 1c08c3a
commit 4398c29
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/lib/navbar/NavUl.svelte b/src/lib/navbar/NavUl.svelte
@@ -7,7 +7,7 @@
 
 <script lang="ts">
   import { getContext, setContext } from 'svelte';
-  import { quintOut } from 'svelte/easing';
+  import { sineIn } from 'svelte/easing';
   import { writable, type Writable } from 'svelte/store';
   import { slide, type SlideParams } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
@@ -19,7 +19,7 @@
   export let divClass: string = 'w-full md:block md:w-auto';
   export let ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
   export let hidden: boolean | undefined = undefined;
-  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+  export let slideParams: SlideParams = { delay: 250, duration: 500, easing: sineIn };
   export let activeClass: string = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
   export let nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
 

diff --git a/src/routes/docs/components/carousel.md b/src/routes/docs/components/carousel.md
@@ -223,8 +223,8 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
       </Indicator>
     </Indicators>
     <Controls let:changeSlide let:ControlButton>
-      <ControlButton name="Previous" forward={false} on:click={changeSlide(false)} class="bg-red-300/50 dark:bg-red-400/50" />
-      <Button pill class="p-2 absolute top-1/2 -translate-y-1/2 end-4 font-bold" on:click={changeSlide(true)}><CaretRightOutline /></Button>
+      <ControlButton name="Previous" forward={false} on:click={()=>changeSlide(false)} class="bg-red-300/50 dark:bg-red-400/50" />
+      <Button pill class="p-2 absolute top-1/2 -translate-y-1/2 end-4 font-bold" on:click={()=>changeSlide(true)}><CaretRightOutline /></Button>
     </Controls>
   </Carousel>
   <Thumbnails class="bg-transparent gap-3" let:Thumbnail let:image let:selected {images} bind:index>