Update docs

src/docs/Carousel.svx

@@ -3,6 +3,7 @@
   import Carousel from '../components/Carousel/Carousel.svelte'
   import Color from './Color.svelte'
   import AlbumsPreview from './AlbumsPreview/AlbumsPreview.svelte'
+  import Divider from './Divider.svelte'
 
   const colors = [
     { color: '#85d78b', text: '#85d78b' },
@@ -15,8 +16,18 @@
     { color: '#25842b', text: '#25842b' },
     { color: '#1f7125', text: '#1f7125' },
   ]
+
+  const images = [
+    'https://cdn.pixabay.com/photo/2017/03/13/10/25/hummingbird-2139278_1280.jpg',
+    'https://cdn.pixabay.com/photo/2016/03/27/19/49/nature-1283976_1280.jpg',
+    'https://cdn.pixabay.com/photo/2018/07/09/18/17/apple-3526737_1280.jpg',
+    'https://cdn.pixabay.com/photo/2016/08/30/16/05/leaf-1631181_1280.jpg',
+    'https://cdn.pixabay.com/photo/2019/11/13/11/01/meadow-4623279_1280.jpg'
+  ]
 </script>
 
+# Features
+
 ## Single item
 <Carousel>
   {#each colors as { color, text } (color)}
@@ -32,6 +43,8 @@
 </Carousel>
 ```
 
+<Divider />
+
 ## Multiple items
 <Carousel>
   {#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
@@ -55,6 +68,185 @@
 </Carousel>
 ```
 
-## Albums preview or Marketplace item pictures
+<Divider />
 
+## Autoplay
+<Carousel
+  autoplay={true}
+  autoplaySpeed={2000}
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  autoplay={true}
+  autoplaySpeed={2000}
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
+## Lazy loading
+<Carousel
+  let:loaded
+>
+  {#each images as src, imageIndex (src)}
+    <div class="img-container">
+      {#if loaded.includes(imageIndex)}
+        <img {src} />
+      {/if}
+    </div>
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  let:loaded
+>
+  {#each images as src, imageIndex (src)}
+    <div class="img-container">
+      {#if loaded.includes(imageIndex)}
+        <img {src} />
+      {/if}
+    </div>
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
+## Use case
 <AlbumsPreview />
+
+# Installation
+```bash
+yarn add svelte-carousel
+npm install svelte-carousel
+```
+
+Import css in App component
+```jsx
+<script>
+  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                              |
+| speed                | number     | 500         | Transition speed (ms)                         |
+| autoplay             | boolean    | false       | Enables auto play of pages                    |
+| autoplaySpeed        | 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>
+```
+
+<Divider />
+
+<style>
+.img-container {
+  display: block;
+  width: 100%;
+  height: 200px;
+}
+.img-container > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-user-drag: none;
+}
+
+/* table */
+table {
+  border-collapse: collapse;
+}
+tr {
+  border-bottom: 2px solid #009800;
+}
+td {
+  padding: 2px 10px;
+}
+</style>

src/docs/Color.svelte

@@ -11,7 +11,7 @@
 
 <style>
   .color-container {
-    height: 100px;
+    height: 150px;
     width: 100%;
     display: flex;
     align-items: center;

src/docs/Divider.svelte

@@ -0,0 +1,11 @@
+<div class="divider">
+
+</div>
+
+<style>
+.divider {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  height: 1px;
+}
+</style>

src/docs/Layouts/Main.svelte

@@ -1,9 +1,25 @@
+<script>
+  const links = [{
+    title: 'github',
+    url: 'https://github.com/vadimkorr/svelte-carousel'
+  }, {
+    title: 'npm',
+    url: 'https://www.npmjs.com/package/svelte-carousel'
+  }]
+</script>
+
 <div class="docs__main-layout__main-container">
-  <div class="docs__main-layout__content-container">
+  <div class="docs__main-layout__header-container">
-    <div class="docs__main-layout__content-inner-container">
+    <img class="docs__main-layout__logo" src="./svelte-carousel-logo-md.png" alt="svelte-carousel-logo" />
-      <slot></slot>
+    <div class="docs__main-layout__links-container">
+      {#each links as { url, title } (title)}
+        <a href={url} target="_blank" rel="noopener noreferrer">{title}</a>
+      {/each}
     </div>
   </div>
+  <div class="docs__main-layout__content-container">
+    <slot></slot>
+  </div>
 </div>
 
 <style>
@@ -11,27 +27,52 @@
   background-color: #eaeaea;
 }
 
-.docs__main-layout__content-container {
+.docs__main-layout__header-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #f0e68c;
+}
+.docs__main-layout__logo {
+  height: 80%;
+}
+.docs__main-layout__links-container {
   display: flex;
   justify-content: center;
+  padding: 10px;
+}
+.docs__main-layout__links-container > a {
+  text-decoration: none;
+  color: #009800;
+}
+.docs__main-layout__links-container > a:not(:last-child) {
+  margin-right: 10px;
+}
+
+.docs__main-layout__content-container {
+  margin: 0 auto;
 }
 @media screen and (min-width: 0px) {
-  .docs__main-layout__content-inner-container {
+  .docs__main-layout__content-container {
     width: 95%;
   }
 }
 @media screen and (min-width: 768px) {
-  .docs__main-layout__content-inner-container {
+  .docs__main-layout__content-container {
     width: 70%;
   }
 }
 @media screen and (min-width: 992px) {
-  .docs__main-layout__content-inner-container {
+  .docs__main-layout__content-container {
     width: 60%;
   }
 }
 @media screen and (min-width: 1200px) {
-  .docs__main-layout__content-inner-container {
+  .docs__main-layout__content-container {
     width: 50%;
   }
 }