public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update readme

Browse Source
This commit is contained in:
Vadim
2021-01-27 23:44:36 +03:00
parent e2603c3b7e
commit e0017a8f3a
1 changed files with 102 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
README.md
View File

@@ -1,6 +1,8 @@
# svelte-carousel
![svelte-carousel](./docs/svelte-carousel-logo-md.png)
# svelte-carousel
<div align="left">
[![npm](https://img.shields.io/npm/v/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel) [![npm](https://img.shields.io/npm/dm/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel)
@@ -9,15 +11,108 @@
</div>
The awesome carousel component for Svelte 3
## Demo
https://vadimkorr.github.io/svelte-carousel
## Installation
```
npm install svelte-carousel
```bash
yarn add svelte-carousel
npm install svelte-carousel
```
```js
import 'svelte-carousel/dist/index.css'
Import component and styles in App component
```jsx
<script>
import 'svelte-carousel/dist/index.css'
import Carousel from 'svelte-carousel'
// ...
</script>
```
_TBD_
## 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 |
| 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
<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>
```