# 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}
```
## Lazy loading
{#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}
```
## Use case
# Installation
```bash
yarn add svelte-carousel
npm install svelte-carousel
```
Import css in App 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 |
| speed | number | 500 | Transition speed (ms) |
| autoplay | boolean | false | Enables auto play of pages |
| autoplaySpeed | number | 3000 | Auto play change interval |
| autoplayDirection | string | 3000 | Auto play change direction (`next` or `prev`) |
| dots | boolean | true | Current page indicator dots |
# 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