fix(carousel): first auto play should be triggered in mount instead of in intro end event

Author: Blackman99

.changeset/tiny-poems-switch.md

@@ -0,0 +1,5 @@
+---
+'@casual-ui/svelte': patch
+---
+
+fix(carousel): first auto play should be triggered in mount instead of in intro end event

packages/docs/src/routes/test/+page.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { CCarousel, CCarouselSlider } from '@casual-ui/svelte'
+
+  let activeIndex = 0
+</script>
+
+<CCarousel bind:activeIndex interval={5000} infinity arrowTiming="hover">
+  <CCarouselSlider>
+    <div class="item">
+      <div class="icon i-openmoji-red-apple" />
+      Do you want some apples?
+    </div>
+  </CCarouselSlider>
+  <CCarouselSlider>
+    <div class="item">
+      <div class="icon i-openmoji-banana" />
+      Would you like some bananas?
+    </div>
+  </CCarouselSlider>
+  <CCarouselSlider>
+    <div class="item">
+      <div class="icon i-openmoji-grapes" />
+      How about some grapes?
+    </div>
+  </CCarouselSlider>
+</CCarousel>
+
+<style>
+  .item {
+    font-size: 32px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .item .icon {
+    font-size: 100px;
+  }
+</style>

packages/ui/src/components/carousel/CCarousel.svelte

@@ -48,10 +48,10 @@
   export const hoveringKey = Symbol('c-carousel-hovering')
 
   /**
-   * The slidering flag key.
+   * The sliding flag key.
    * @type {symbol}
    */
-  export const slideringKey = Symbol('c-carousel-slidering')
+  export const slidingKey = Symbol('c-carousel-slidering')
 
   /**
    * The pause functions key.
@@ -67,7 +67,7 @@
 </script>
 
 <script>
-  import { setContext } from 'svelte'
+  import { onMount, setContext } from 'svelte'
   import { cubicInOut } from 'svelte/easing'
   import { writable } from 'svelte/store'
   import { fade } from 'svelte/transition'
@@ -220,7 +220,7 @@
   const sliding = writable(false)
 
   setContext(hoveringKey, hovering)
-  setContext(slideringKey, sliding)
+  setContext(slidingKey, sliding)
 
   $: paused = ($hovering && pauseOnHover) || $sliding
 
@@ -253,6 +253,15 @@
     $verticalContext = vertical
   }
 
+  let initialized = false
+
+  onMount(() => {
+    if (!initialized && interval) {
+      initialized = true
+      timeoutFlag.set(setTimeout(toNext, interval))
+    }
+  })
+
   export { toPrev, toNext, toIndex }
 </script>
 

packages/ui/src/components/carousel/CCarouselSlider.svelte

@@ -8,8 +8,8 @@
     intervalKey,
     pausesKey,
     resumesKey,
-    slideringKey,
     slidesKey,
+    slidingKey,
     timeoutKey,
     toNextKey,
     verticalKey,
@@ -23,7 +23,7 @@
   const toNext = getContext(toNextKey)
   const timeoutFlag = getContext(timeoutKey)
   const hovering = getContext(hoveringKey)
-  const slidering = getContext(slideringKey)
+  const sliding = getContext(slidingKey)
 
   const currentIndex = $slides.length
 
@@ -34,7 +34,7 @@
    * @param {*} node
    * @param {*} params
    */
-  const carousel = (node, params) => {
+  const carousel = (_node, params) => {
     const { leave } = params
     return {
       duration: 300,
@@ -62,18 +62,17 @@
   let remain = $interval
 
   const onIntroStart = () => {
-    $slidering = true
-    remain = $interval
+    $sliding = true
   }
 
-  const onIntroEnd = () => {
-    $slidering = false
+  const onIntroEnd = async () => {
+    $sliding = false
     remain = $interval
     if ($interval && toNext && !$hovering) {
       start = Date.now()
       if ($timeoutFlag) clearTimeout($timeoutFlag)
 
-      $timeoutFlag = setTimeout(toNext, remain)
+      $timeoutFlag = setTimeout(toNext, $interval)
     }
   }
 
@@ -95,7 +94,7 @@
     }
   }
 
-  if (pauses && Array.isArray(pauses)) pauses.push(pause)
+  if (Array.isArray(pauses)) pauses.push(pause)
 
   const resume = () => {
     if ($activeIndex !== currentIndex) return
@@ -105,7 +104,7 @@
     $timeoutFlag = setTimeout(toNext, remain)
   }
 
-  if (resumes && Array.isArray(resumes)) resumes.push(resume)
+  if (Array.isArray(resumes)) resumes.push(resume)
 
   onDestroy(() => {
     if ($timeoutFlag) clearTimeout($timeoutFlag)