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

#31 : Add new demos

Browse Source
This commit is contained in:
Vadim
2021-07-03 22:58:20 +03:00
parent 04d155823c
commit 930ec9f6ae
2 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/docs/Carousel.svx
View File

@@ -76,6 +76,58 @@
<Divider />
## Autoplay with duration progress
<Carousel
autoplay
autoplayDuration={5000}
autoplayProgressVisible
>
{#each colors as { color, text } (color)}
<Color {color} {text} />
{/each}
</Carousel>
```jsx
<Carousel
autoplay
autoplayDuration={5000}
autoplayProgressVisible
>
{#each colors as { color, text } (color)}
<Color {color} {text} />
{/each}
</Carousel>
```
<Divider />
## Autoplay with pause on focus
<Carousel
autoplay
autoplayDuration={5000}
autoplayProgressVisible
pauseOnFocus
>
{#each colors as { color, text } (color)}
<Color {color} {text} />
{/each}
</Carousel>
```jsx
<Carousel
autoplay
autoplayDuration={5000}
autoplayProgressVisible
pauseOnFocus
>
{#each colors as { color, text } (color)}
<Color {color} {text} />
{/each}
</Carousel>
```
<Divider />
## Lazy loading of images
<Carousel
let:loaded
@@ -217,10 +269,10 @@ Import component
| `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 |
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pause autoplay on focus |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
</div>