diff --git a/README.md b/README.md index 0a6a427..aefb199 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -# svelte-carousel +![svelte-carousel](./docs/svelte-carousel-logo-md.png) +# svelte-carousel +
[![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 @@
+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 + ``` -_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 + +
+ +
+
+ +
+ +
+``` + +### `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 + +
+ +
+ +
+``` \ No newline at end of file