# Features
## Single item
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Multiple items
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
{#each colorsChunk as { color, text } (color)}
{/each}
{/each}
```jsx
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
{#each colorsChunk as { color, text } (color)}
{/each}
{/each}
```
## Autoplay
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Autoplay with duration progress
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Autoplay with pause on focus
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Lazy loading of images
{#each images as src, imageIndex (src)}
{#if loaded.includes(imageIndex)}
{/if}
{/each}
```jsx
{#each images as src, imageIndex (src)}
{#if loaded.includes(imageIndex)}
{/if}
{/each}
```
## Arrows customization
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Dots customization
{#each Array(pagesCount) as _, pageIndex (pageIndex)}
showPage(pageIndex)}
>
{/each}
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each Array(pagesCount) as _, pageIndex (pageIndex)}
showPage(pageIndex)}
>
{/each}
{#each colors as { color, text } (color)}
{/each}
```
## Use case
# Installation
```bash
yarn add svelte-carousel
```
```bash
npm install svelte-carousel
```
Import component
```jsx
```
# Props
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages |
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover on the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping |
# Events
## `pageChange`
Is dispatched on page change
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| `event.detail` | `number` | Current page index |
```jsx
console.log(`Current page index: ${event.detail}`)
}
>
```
# Slots
## `prev` and `next`
They are used for customizing prev and next buttons.
Slot props:
| Prop | Type | Description |
|--------------------|-------------|---------------------------------------|
| `showPrevPage` | `function` | Call it to switch to the previos page |
| `showNextPage` | `function` | Call it to switch to the next page |
```jsx
```
## `dots`
This slot is used for customizing dots appearance.
Slot props:
| Prop | Type | Description |
|---------------------|---------- --|----------------------------------------------|
| `currentPageIndex` | `number` | Represents current page index (start from 0) |
| `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown |
```jsx
```
## Default slot
This slot takes content for the carousel.
Slot props:
| Prop | Type | Description |
|-------------------|------------|----------------------------------------------------------------------|
| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
```jsx
```
# Methods
## `goTo`
Navigates to a page by index. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `pageIndex` | `number` | | Page number |
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```
## `goToPrev`
Navigates to the previous page. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```
## `goToNext`
Navigates to the next page. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```