Add pageChange event

src/components/Carousel/Carousel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onDestroy, onMount, tick } from 'svelte'
+  import { onDestroy, onMount, tick, createEventDispatcher } from 'svelte'
   import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
@@ -11,6 +11,8 @@
   } from '../../utils/event'
   import { getAdjacentIndexes } from '../../utils/page'
 
+  const dispatch = createEventDispatcher()
+
   const directionFnDescription = {
     [NEXT]: showNextPage,
     [PREV]: showPrevPage
@@ -60,6 +62,8 @@
   let store = createStore()
   let currentPageIndex = 0
   $: originalCurrentPageIndex = currentPageIndex - Number(infinite);
+  $: dispatch('pageChange', originalCurrentPageIndex)
+
   let pagesCount = 0
   $: originalPagesCount = Math.max(pagesCount - (infinite ? 2 : 0), 1) // without clones
   let pageWidth = 0

src/components/Carousel/CarouselView.svelte

@@ -72,6 +72,9 @@
     {autoplayDuration}
     {autoplayDirection}
     {dots}
+    on:pageChange={
+      event => console.log(`Current page index: ${event.detail}`)
+    }
   >
     {#each colors as { color, text } (color)}
       <div

src/docs/Carousel.svx

@@ -217,6 +217,29 @@ Import component and styles in App component
 
 </div>
 
+# Event
+
+## `pageChange`
+Is dispatched on page change
+
+<div class="table-wrapper">
+
+| Payload field      | Type        | Description                           | 
+|--------------------|-------------|---------------------------------------|
+| `event.detail`     | `number`    | Current page index                    |
+
+</div>
+
+```jsx
+<Carousel
+  on:pageChange={
+    event => console.log(`Current page index: ${event.detail}`)
+  }
+>
+  <!-- -->
+</Carousel>
+```
+
 # Slots
 
 ## `prev` and `next`