# Features!anchorId:features;
## Single item!anchorId:features-single-item;
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Multiple items!anchorId:features-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!anchorId:features-autoplay;
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Autoplay with duration progress!anchorId:features-autoplay-duration-progress;
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus;
**For touchable devices** - tap the carousel to toggle the autoplay.
**For non-touchable devices** - hover over the carousel to pause the autoplay.
{#each colors as { color, text } (color)}
{/each}
```jsx
{#each colors as { color, text } (color)}
{/each}
```
## Lazy loading of images!anchorId:features-lazy-loading;
{#each images as src, imageIndex (src)}
{#if loaded.includes(imageIndex)}
{/if}
{/each}
```jsx
{#each images as src, imageIndex (src)}
{#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 cases!anchorId:features-use-cases;
# Installation!anchorId:installation;
```bash
yarn add svelte-carousel
```
```bash
npm install svelte-carousel
```
Import component:
```jsx
```
# Props!anchorId:props;
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enables 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 touchable devices - tap the carousel to toggle the autoplay, for non-touchable devices - hover over the carousel to pause the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enables swiping |
# Events!anchorId:events;
## pageChange!anchorId:events-page-change;
It is dispatched on page change.
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| `event.detail` | `number` | Current page index |
```jsx
console.log(`Current page index: ${event.detail}`)
}
>
```
# Slots!anchorId:slots;
## prev and next!anchorId:slots-prev-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!anchorId:slots-dots;
This slot is used for customizing how dots look like.
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!anchorId:slots-default;
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!anchorId:methods;
## goTo!anchorId:methods-go-to;
Navigates to a page by index. `(pageIndex, options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `pageIndex` | `number` | | Page number |
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```
## goToPrev!anchorId:methods-go-to-prev;
Navigates to the previous page. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```
## goToNext!anchorId:methods-go-to-next;
Navigates to the next page. `(options) => Promise`.
Arguments:
| Argument | Type | Default | Description |
|--------------------|-------------|---------|------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
```jsx
```