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

#48 : Fix typos

Browse Source
This commit is contained in:
Vadim
2021-08-14 19:24:00 +03:00
parent 112154a8f3
commit 31a145153e
2 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -14,7 +14,6 @@
The awesome carousel component for Svelte 3
## Demo
* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
@@ -35,7 +34,6 @@ Import component
```
## SvelteKit support
There are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq).
1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)
@@ -81,23 +79,23 @@ npm install svelte-carousel -D
## Props
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `arrows` | `boolean` | `true` | Enables 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 |
| `autoplay` | `boolean` | `false` | Enables autoplay of pages |
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator |
| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping |
| `swiping` | `boolean` | `true` | Enables swiping |
## Events
### `pageChange`
Is dispatched on page change
It is dispatched on page change
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
@@ -141,8 +139,7 @@ Slot props:
```
### `dots`
This slot is used for customizing dots appearance.
This slot is used for customizing how dots look like.
Slot props:
@@ -166,7 +163,6 @@ Slot props:
```
### Default slot
This slot takes content for the carousel.
Slot props:

17
src/docs/Carousel.svx
View File

@@ -102,7 +102,6 @@
<Divider />
## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus;
**For desktop** - hover over the carousel to toggle the autoplay.
**For touchable devices** - tap the carousel to toggle the autoplay.
@@ -245,7 +244,6 @@
<Divider />
# Installation!anchorId:installation;
```bash
yarn add svelte-carousel
```
@@ -253,7 +251,7 @@ yarn add svelte-carousel
npm install svelte-carousel
```
Import component
Import component:
```jsx
<script>
import Carousel from 'svelte-carousel'
@@ -264,10 +262,9 @@ Import component
<Divider />
# Props!anchorId:props;
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `arrows` | `boolean` | `true` | Enables next/prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
@@ -275,17 +272,17 @@ Import component
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator |
| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping |
| `swiping` | `boolean` | `true` | Enables swiping |
<Divider />
# Events!anchorId:events;
## pageChange!anchorId:events-page-change;
Is dispatched on page change
It is dispatched on page change.
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
@@ -331,8 +328,7 @@ Slot props:
```
## dots!anchorId:slots-dots;
This slot is used for customizing dots appearance.
This slot is used for customizing how dots look like.
Slot props:
@@ -356,7 +352,6 @@ Slot props:
```
## Default slot!anchorId:slots-default;
This slot takes content for the carousel.
Slot props: