Update readme

README.md

@@ -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
-
+```bash
-```
-npm install svelte-carousel
 yarn add svelte-carousel
+npm install svelte-carousel
 ```
 
-```js
+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>
+```