138 lines
4.1 KiB
Markdown
138 lines
4.1 KiB
Markdown
|
|
|
|
|
|
# svelte-carousel
|
|
|
|
<div align="left">
|
|
|
|
[](https://www.npmjs.com/package/svelte-carousel) [](https://www.npmjs.com/package/svelte-carousel)
|
|
<br />
|
|
[](https://github.com/vadimkorr/svelte-carousel) [](https://github.com/vadimkorr)
|
|
|
|
</div>
|
|
|
|
The awesome carousel component for Svelte 3
|
|
|
|
## Demo
|
|
|
|
https://vadimkorr.github.io/svelte-carousel
|
|
|
|
## Installation
|
|
```bash
|
|
yarn add svelte-carousel
|
|
npm install svelte-carousel
|
|
```
|
|
|
|
Import component and styles in App component
|
|
```jsx
|
|
<script>
|
|
import Carousel from 'svelte-carousel'
|
|
import 'svelte-carousel/dist/index.css'
|
|
// ...
|
|
</script>
|
|
```
|
|
|
|
## 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` | Auto play change interval (ms) |
|
|
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
|
|
| `dots` | `boolean` | `true` | Current page indicator dots |
|
|
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
|
|
|
|
# Events
|
|
|
|
## `pageChange`
|
|
Is dispatched on page change
|
|
|
|
| Payload field | Type | Description |
|
|
|--------------------|-------------|---------------------------------------|
|
|
| `event.detail` | `number` | Current page index |
|
|
|
|
```jsx
|
|
<Carousel
|
|
on:pageChange={
|
|
event => console.log(`Current page index: ${event.detail}`)
|
|
}
|
|
>
|
|
<!-- -->
|
|
</Carousel>
|
|
```
|
|
|
|
## 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
|
|
<Carousel
|
|
let:showPrevPage
|
|
let:showNextPage
|
|
>
|
|
<div slot="prev">
|
|
<!-- -->
|
|
</div>
|
|
<div slot="next">
|
|
<!-- -->
|
|
</div>
|
|
<!-- -->
|
|
</Carousel>
|
|
```
|
|
|
|
### `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
|
|
<Carousel
|
|
let:currentPageIndex
|
|
let:pagesCount
|
|
let:showPage
|
|
>
|
|
<div slot="dots">
|
|
<!-- -->
|
|
</div>
|
|
<!-- -->
|
|
</Carousel>
|
|
```
|
|
|
|
### 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
|
|
<Carousel
|
|
let:loaded
|
|
>
|
|
<div>
|
|
<!-- -->
|
|
</div>
|
|
<!-- -->
|
|
</Carousel>
|
|
``` |