\n\nThe awesome carousel component for Svelte 3\n\n## Demo\n* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)\n* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)\n\n## Installation\n```bash\nyarn add svelte-carousel\n```\n```bash\nnpm install svelte-carousel\n```\n\nImport component\n```jsx\n\n```\n\n## SvelteKit support\nThere are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq).\n\n1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)\n\n```bash\nyarn add svelte-carousel -D\n```\n```bash\nnpm install svelte-carousel -D\n```\n\n2. Extend `kit` in `svelte.config.js` to include the `vite` property\n\n```js\nconst config = {\n // existing props\n kit: {\n // existing props\n vite: { optimizeDeps: { include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep'] } }\n }\n}\n```\n\n3. Import and use it:\n\n```jsx\n\n\n\n\n
1
\n
2
\n
3
\n\n\n\n```\n\n## Vite support\n1. Extend `optimizeDeps.include` in `vite.config.js`\n\n```js\nexport default defineConfig({\n optimizeDeps: {\n include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']\n }\n})\n\n```\n\n2. Import and use it:\n\n```jsx\n\n\n\n\n
1
\n
2
\n
3
\n\n\n\n```\n\n## Props\n| Prop | Type | Default | Description | \n|---------------------------|------------|-----------------|-----------------------------------------------|\n| `arrows` | `boolean` | `true` | Enables next/prev arrows |\n| `infinite` | `boolean` | `true` | Infinite looping |\n| `initialPageIndex` | `number` | `0` | Page to start on |\n| `duration` | `number` | `500` | Transition duration (ms) |\n| `autoplay` | `boolean` | `false` | Enables autoplay of pages |\n| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |\n| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |\n| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for touchable devices - tap the carousel to toggle the autoplay, for non-touchable devices - hover over the carousel to pause the autoplay) |\n| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |\n| `dots` | `boolean` | `true` | Current page indicator dots |\n| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |\n| `swiping` | `boolean` | `true` | Enables swiping |\n| `particlesToShow` | `number` | `1` | Number of elements to show |\n| `particlesToScroll` | `number` | `1` | Number of elements to scroll |\n\n## Events\n\n### `pageChange`\nIt is dispatched on page change\n\n| Payload field | Type | Description | \n|--------------------|-------------|---------------------------------------|\n| `event.detail` | `number` | Current page index |\n\n```jsx\n console.log(`Current page index: ${event.detail}`)\n }\n>\n \n\n```\n\n## Slots\n\n### `prev` and `next`\nThey are used for customizing prev and next buttons.\n\nSlot props:\n\n| Prop | Type | Description | \n|--------------------|-------------|---------------------------------------|\n| `showPrevPage` | `function` | Call it to switch to the previos page |\n| `showNextPage` | `function` | Call it to switch to the next page |\n\n```jsx\n\n
\n \n
\n
\n \n
\n \n\n```\n\n### `dots`\nThis slot is used for customizing how dots look like.\n\nSlot props:\n\n| Prop | Type | Description | \n|---------------------|--------------|----------------------------------------------|\n| `currentPageIndex` | `number` | Represents current page index (start from 0) |\n| `pagesCount` | `number` | Total pages amount |\n| `showPage` | `function` | Takes index as page to be shown |\n\n```jsx\n\n
\n \n
\n \n\n```\n\n### Default slot\nThis slot takes content for the carousel.\n\nSlot props:\n\n| Prop | Type | Description | \n|-------------------|------------|----------------------------------------------------------------------|\n| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |\n\n```jsx\n\n
\n \n
\n \n\n```\n\n## Methods\n\n### `goTo`\nNavigates to a page by index. `(pageIndex, options) => Promise`.\n\nArguments:\n\n| Argument | Type | Default | Description | \n|--------------------|-------------|---------|---------------------------------------|\n| `pageIndex` | `number` | | Page number |\n| `options.animated` | `boolean` | `true` | Should it be animated or not |\n\n```jsx\n\n\n\n \n\n\n```\n\n### `goToPrev`\nNavigates to the previous page. `(options) => Promise`.\n\nArguments:\n\n| Argument | Type | Default | Description | \n|--------------------|-------------|---------|-------------------------------|\n| `options.animated` | `boolean` | `true` | Should it be animated or not |\n\n```jsx\n\n\n\n \n\n\n```\n\n### `goToNext`\nNavigates to the next page. `(options) => Promise`.\n\nArguments:\n\n| Argument | Type | Default | Description | \n|--------------------|-------------|---------|------------------------------|\n| `options.animated` | `boolean` | `true` | Should it be animated or not |\n\n```jsx\n\n\n\n \n\n\n```\n","readmeFilename":"README.md"}