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

#69 : Update demo

Browse Source
This commit is contained in:
Vadim
2021-09-17 10:54:17 +03:00
parent e10ad68bb4
commit 2b2eca4cdd
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/docs/Carousel.svx
View File

@@ -29,24 +29,22 @@
<Divider /> <Divider />
## Multiple items!anchorId:features-multiple-items; ## Multiple items!anchorId:features-multiple-items;
<Carousel> <Carousel
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)} particlesToShow={3}
<div style="display: flex;"> particlesToScroll={3}
{#each colorsChunk as { color, text } (color)} >
<Color {color} {text} /> {#each colors as { color, text } (color)}
{/each} <Color {color} {text} />
</div>
{/each} {/each}
</Carousel> </Carousel>
```jsx ```jsx
<Carousel> <Carousel
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)} particlesToShow={3}
<div style="display: flex;"> particlesToScroll={3}
{#each colorsChunk as { color, text } (color)} >
<Color {color} {text} /> {#each colors as { color, text } (color)}
{/each} <Color {color} {text} />
</div>
{/each} {/each}
</Carousel> </Carousel>
``` ```
@@ -276,6 +274,8 @@ Import component:
| `dots` | `boolean` | `true` | Current page indicator dots | | `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enables swiping | | `swiping` | `boolean` | `true` | Enables swiping |
| `particlesToShow` | `number` | `1` | Number of elements to show |
| `particlesToScroll` | `number` | `1` | Number of elements to scroll |
<Divider /> <Divider />